微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果

更新時(shí)間：2020年06月19日 14:48:48 作者：anLazyAnt

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這里展示一個(gè)工作中用到的微信小程序的單選選項(xiàng)卡切換效果的制作方法，供大家參考，具體內(nèi)容如下

效果如圖：

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: {
 // 讓所有的選項(xiàng)都成為未選中狀態(tài)
 choose: false,
 // 用來循環(huán)展示的數(shù)據(jù)
 data: [1, 2, 3],
 text: '選中了',
 textTwo: '沒選中'
 },
 // 點(diǎn)擊選項(xiàng)卡時(shí)的js
 chooseItem: function (e) {
 //記錄上次點(diǎn)擊的對(duì)象的序號(hào)
 var oldidx = this.data.currentidx;
 //記錄當(dāng)前點(diǎn)擊的對(duì)象的序號(hào)
 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
  });
 }
 }
})

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jstl中判斷l(xiāng)ist中是否包含某個(gè)值的簡單方法
下面小編就為大家?guī)硪黄猨stl中判斷l(xiāng)ist中是否包含某個(gè)值的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
前端判斷對(duì)象為空的6種方法舉例
在前端中可以使用多種方法來判斷一個(gè)對(duì)象是否為空,這篇文章主要給大家介紹了關(guān)于前端判斷對(duì)象為空的6種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
js獲取窗口相對(duì)于屏幕左邊和上邊的位置坐標(biāo)
這篇文章主要介紹了js如何獲取窗口相對(duì)于屏幕左邊和上邊的位置,需要的朋友可以參考下
2014-05-05
微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
JavaScript快速排序算法不同版本原理解析
這篇文章主要為大家介紹了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像示例
這篇文章主要介紹了js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像的具體實(shí)現(xiàn)，大家可以參考下面的示例
2014-03-03
three.js搭建室內(nèi)場景教程
這篇文章主要為大家詳細(xì)介紹了three.js搭建室內(nèi)場景教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
Bootstrap表格制作代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表格的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
js用閉包遍歷樹狀數(shù)組的方法
這篇文章主要介紹了js中用閉包遍歷樹狀數(shù)組的方法,需要的朋友可以參考下
2014-03-03
CSDN上快速結(jié)貼的方法，JS實(shí)現(xiàn)
CSDN上快速結(jié)貼的方法，JS實(shí)現(xiàn)...
2007-03-03