zoukankan      html  css  js  c++  java
  • 微信小程序开发笔记(九)--单选标签效果

    1.wxml:

    <block wx:for='{{itemList}}' wx:key='{{key}}'>
        <view class="{{index==isChoice?'_on':''}}" bindtap='itemChoice' data-index="{{index}}"><text>{{item.name}}</text></view>
    </block>

    2.wxss:

    ._on {
      color: #1DB1CF;
      border: 1rpx solid #1DB1CF;
    }

    3.wxjs:

    Page({
      data: {
        isChoice: '0', //设置默认选中
        itemList: [{
            id: 1,
            name: '北京',
          },
          {
            id: 2,
            name: '上海',
          },
          {
            id: 3,
            name: '广州',
          },
          {
            id: 4,
            name: '杭州',
          },
        ]
      },
    
      itemChoice(e) {
        let index = e.currentTarget.dataset.index;
        console.log('您选择了index', index)
        this.setData({
          isChoice: index,
        })
      },
    
    })
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    网文阅读笔记
    UUID
    各种网站
    项目
    常用正则表达式
    Struts 2.0 HelloWorld
    接口与抽象类(深入多态)
    #define的优点/volatile的好处
    基本套接口编程
    大小端判断及相互转化
  • 原文地址:https://www.cnblogs.com/antao/p/12804961.html
Copyright © 2011-2022 走看看