微信小程序实现点击同时切换图标和文字(完整详解)

青衫折扇

已于 2022-04-19 11:19:52 修改

阅读量8.2k

点赞数 6

分类专栏：小程序文章标签：前端

于 2020-04-23 13:54:38 首次发布

本文链接：https://blog.csdn.net/qq_42543264/article/details/105705990

版权

小程序专栏收录该内容

91 篇文章 40 订阅

订阅专栏

我们来看一下效果

接下来我们一起来看看怎么实现的吧

wxml

<view wx:if="{{addBookrackSucceed==false}}">
     <view>
        <image src="{{iconAddBookrackSucceed}}"></image>
        <view class="{{addBookrackSucceed==false? 'active':''}}">{{bookAddBookrackSucceed}}</view>
     </view>
</view>
<view wx:else>
     <view bindtap="chooseAddBookrack">
        <image src="{{iconAddBookrack}}"></image>
        <view>{{bookAddBookrack}}</view>
     </view>
</view>

在wxml中一个简单的判断默认为ture,判断为false切换图标文字

主要部分js

data: {
    addBookrackSucceed: true,
    iconAddBookrack: "../../../image/icon/icon-add-bookrack.png",         //添加书架图标
    iconAddBookrackSucceed: "../../../image/icon/icon-add-bookrack-succeed.png",         //添加书籍成功图标    
},
// 加入书架
chooseAddBookrack: function() {
    let value = this.data.addBookrackSucceed;
    wx.showToast({
      title: '加入成功',      //标题
      icon: "success",        //图标类型, 默认success
      duration: 1500                //提示框停留时间, 默认1500ms
    })
    this.setData({
      addBookrackSucceed: !value
    })
    console.log(value)
},

js部分就不解释了,都有备注

最后一分部wxss

.base-button .book-button-left {
  display: flex;
}
.base-button .book-button-left view image {
  padding-top: 10rpx; 
  width: 50rpx;
  height: 50rpx;
  display: block;
  margin: 0 auto;
}
.base-button .book-button-left view view {
  width: 100%;
  font-size: 20rpx;
  color: #515151;
}

/* 点击后的样式 */
.active {
  color: #8a8a8a !important;
}

以上就是效果的所有代码,此为做个人项目所需要实现的功能,再此分享给大家,以供大家参考,如有什么问题,关注+留言,共同进步,谢谢

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序