国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

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

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

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武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 望谟县| 若尔盖县| 开阳县| 临颍县| 江孜县| 定州市| 大宁县| 溆浦县| 平谷区| 宁河县| 涞水县| 四会市| 西华县| 塔城市| 南投市| 漠河县| 南通市| 黑龙江省| 邢台县| 威海市| 平谷区| 辽源市| 舞阳县| 夹江县| 饶阳县| 白城市| 武清区| 抚宁县| 武川县| 临西县| 金阳县| 眉山市| 馆陶县| 凉山| 杭州市| 故城县| 西峡县| 新龙县| 澳门| 武冈市| 新密市|