微信小程序實現單選選項卡切換效果
更新時間：2020年06月19日 14:48:48 作者：anLazyAnt
這篇文章主要為大家詳細介紹了微信小程序實現單選選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
這里展示一個工作中用到的微信小程序的單選選項卡切換效果的制作方法，供大家參考，具體內容如下
效果如圖：
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: {
// 讓所有的選項都成為未選中狀態(tài)
choose: false,
// 用來循環(huán)展示的數據
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
});
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了微信小程序中button去除默認的邊框的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
網頁取色...2006-10-10
今天小編就為大家分享一篇layui從數據庫中獲取復選框的值并默認選中方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS隨機打亂數組的方法,結合實例總結分析了幾種常用的數組打亂順序并重新進行排序的技巧,非常簡單實用,需要的朋友可以參考下2016-06-06
需要檢查用戶是否修改了一個表單中的內容，可以使用本文提供的方法，如果修改了表單的內容則返回true，沒修改則返回false，有需求的朋友可以參考下2013-07-07
這篇文章主要為大家詳細介紹了小程序實現滑動塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了細數localStorage的用法及使用注意事項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了JavaScript實現復選框全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JavaScript與jQuery實現的閃爍輸入效果,結合實例形式分別分析了JavaScript與jQuery實現閃爍輸入效果的方法與具體使用技巧,需要的朋友可以參考下2016-02-02
我想用JS實現對文本的加密和解密,想用維吉尼亞密碼算法,誰有現成代碼啊2010-11-11