麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序實現單選選項卡切換效果

2020-03-21 16:02:10
字體:
來源:轉載
供稿:網友

這里展示一個工作中用到的微信小程序的單選選項卡切換效果的制作方法,供大家參考,具體內容如下

效果如圖:

微信小程序,單選,選項卡

wxml:

<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem">  <view class="choosebtn {{idx==currentidx&&choose==true?'choosedbtn':'choosenobtn'}}"></view>  <text>{{idx==currentidx&&choose==true?text:textTwo}}</text></view>

wxss:

.item { width: 100%; height: 120rpx; background: #f5f5f5; display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx;}.item .choosebtn { width: 60rpx; height: 60rpx; border-radius: 50%; margin-left: 40rpx;}.item .choosenobtn { background: #c0c0c0;}.item .choosedbtn { background: #87ceeb;}.item text { margin-left: 30rpx;}

js:

Page({ data: {  // 讓所有的選項都成為未選中狀態  choose: false,  // 用來循環展示的數據  data: [1, 2, 3],  text: '選中了',  textTwo: '沒選中' }, // 點擊選項卡時的js chooseItem: function (e) {  //記錄上次點擊的對象的序號  var oldidx = this.data.currentidx;  //記錄當前點擊的對象的序號  var currentidx = e.currentTarget.dataset.idx;  if (oldidx == currentidx) {   var choose = this.data.choose;   this.setData({    currentidx: currentidx,    choose: !choose   })  } else {   this.setData({    currentidx: currentidx,    choose: true   });  } }})

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 久久精品国产久精国产 | 亚洲精品成人久久 | 鸳鸯谱在线观看高清 | 欧美精品一区二区中文字幕 | 日韩精品无码一区二区三区 | 91精品国产九九九久久久亚洲 | 成人在线视频播放 | 中午字幕无线码一区2020 | 久久久久久久免费看 | 国产成人精品一区二区视频免费 | 久久久久国产一区二区三区不卡 | 国产91久久久久久 | 一级空姐毛片 | 天天草天天干天天射 | 国产日韩在线观看视频 | 久章草影院| 国产日韩在线观看一区 | 男女牲高爱潮免费视频男女 | 国产无遮挡一区二区三区毛片日本 | 亚洲欧洲av在线 | 欧美一级黄视频 | av电影在线观看网站 | 一级做a爰性色毛片免费 | av免费在线网 | 国产精品一区二区三区在线播放 | 国产超碰人人爽人人做人人爱 | 日本aaaa片毛片免费观看视频 | 黄色视频一级毛片 | 成人啪啪18免费网站 | 久久久成人免费视频 | 亚洲精品v天堂中文字幕 | 久久99精品国产自在现线 | 亚洲乱操| 国产美女视频黄a视频免费 日韩黄色在线播放 | 91网在线播放 | 日韩美女电影 | 国产精品久久久久久久不卡 | 黑人日比 | 欧美成人免费电影 | 久久av免费 | 91av大片 |