zoukankan      html  css  js  c++  java
  • 微信小程序——选中状态的切换

    加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等。像我做的项目中,就有一个门店的选择,如下图:

    我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能。

    思路:

    1.定义一个高亮的样式,我就命名为active了;

    2.获取你点击的这个id或者其他的唯一属性,我这里的唯一属性是campusId; 

    3.通过判断你点击的这个元素的campusId 是不是 等于 它自身的campusId,如果等于就添加active的样式。

    相关代码:

    wxml:

    <view class='row row-wrap'>
      <text wx:for="{{campusList}}" wx:for-item="campus" wx:key="campusId" bindtap="chooseCampus" class="fs-28 sel-item {{currentCampus==campus.campusId?'active':''}}" data-id="{{campus.campusId}}">{{campus.name}}</text>
    </view>

    js:

    //获取应用实例
    var app = getApp();
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        campusList: [{
          campusId: 111,
          name: '总部'
        }, {
          campusId: 222,
          name: '岳麓分部1'
        }],
        currentCampus: 0,
      },
      chooseCampus: function(options) {
        var _this = this
        var id = options.currentTarget.dataset.id;
        //设置当前样式
        _this.setData({
          'currentCampus': id
        })
      }
    })

    微信里面要获得data-***的值是通过 options.currentTarget.dataset.*** 来获取的。

  • 相关阅读:
    Linux I2C核心、总线和设备驱动
    移植 Linux 内核
    同步、互斥、阻塞
    异步通知
    poll机制
    Linux异常处理体系结构
    字符设备的驱动
    进程间的通信—套接字(socket)
    进程间的通信—信号量
    Spring事件的应用
  • 原文地址:https://www.cnblogs.com/sese/p/9285453.html
Copyright © 2011-2022 走看看