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.*** 来获取的。

  • 相关阅读:
    uva-712 S-Trees
    Liunx下文件权限详解
    uva-699 The Falling Leaves
    Oracle sql loader 使用案例
    设计模式学习--迭代器模式(Iterator Pattern)和组合模式(Composite Pattern)
    XML 简单介绍
    UVA 11107(Life Forms-后缀数组+二分)
    SRM 212 Div II Level One: YahtzeeScore
    HDU 5695 Gym Class 拓扑排序
    HDU 5694 BD String 迭代
  • 原文地址:https://www.cnblogs.com/sese/p/9285453.html
Copyright © 2011-2022 走看看