微信小程序> 小程序active功能

小程序active功能

浏览量:3266 时间: 来源:编程微刊

目标需求:实现下图,给点击的view增加类,每次只能选择一个。
主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。

效果演示:

 

wxml

<view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for="{{use}}" data-key='{{index}}'>  <view class="flex-item">    <rich-text class='use_name'>{{item.use_name}}</rich-text>  </view></view>

wxss

/* 用途 */.iconusecont-div {  display: inline-block;  width: 32%;  text-align: center;  margin-top: 30rpx;}.flex-item {  display: inline-block;  width: 173rpx;  height: 78rpx;  font-size: 26rpx;  border: 2rpx solid #999;  text-align: center;  border-radius: 10rpx;  color: #000;  cursor: pointer;  line-height: 30rpx;}.use_name {  font-size: 34rpx;  line-height: 79rpx;}.active-tag .flex-item {  background: #03e2ff;  color: #fff;  border: 1rpx solid #fff;}

js

Page({  data: {    use: [{        "use_name": "全部"      },      {        "use_name": "经济实惠型"      },      {        "use_name": "家用学习型"      },      {        "use_name": "豪华发烧型"      },      {        "use_name": "疯狂游戏型"      },      {        "use_name": "商务办公型"      },      {        "use_name": "经济实惠型"      },      {        "use_name": "家用学习型"      },    ],    state: '',  },  //选择用途后加样式  select_use: function(e) {    this.setData({      state: e.currentTarget.dataset.key,    });  },  onReady: function() {},})

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见

  • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎