🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
1. 因为在button中放置image时 不能再button上绑定事件 要绑定事件就要使用卡槽来实现 绑定事件 ~~~ <v-btn wx:if="{{!authorized}}" openType="getUserInfo" bind:onGet="onGetUserInfo" class="logo"> <image slot="image" src="/images/my.png" class="image-btn"></image> </v-btn> <image wx:if="{{authorized}}" src="{{userInfo.avatarUrl}}" class="logo"></image> ~~~ ~~~ // pages/my/my.js import { ClassicModel } from "../../models/classic"; const classicModel = new ClassicModel(); Page({ /** * 页面的初始数据 */ data: { userInfo: '', authorized: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /* 得到用户授权的相关信息 */ this._authorize(); this._getFavor(); }, //组件上绑定的事件 onGetUserInfo(event) { let userInfo = event.detail.userInfo; this.setData({ userInfo, authorized: true }) }, _authorize() { wx.getSetting({ success: (res) => { /* 判断用户是否授权 */ if (res.authSetting['scope.userInfo']) { /* 获取用户相关信息 */ wx.getUserInfo({ success: res => { this.setData({ userInfo: res.userInfo, authorized: true }) } }) } } }); }, _getFavor() { classicModel.getFavor(res => { this.setData({ likes: res }) }) } }) ~~~ ~~~ //卡槽 <button plain="{{true}}" open-type="{{openType}}" bindgetuserinfo="onGetUserInfo" > <slot name="image"></slot> </button> ~~~