欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換

 更新時(shí)間：2020年06月19日 17:06:30   作者：Rechal_Mei  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

選項(xiàng)卡的功能用途有很多地方：例如商品評論的切換，還有文章分類，還有各種各樣的切換功能需要用到。這個(gè)實(shí)現(xiàn)是通過for循環(huán)，取數(shù)值下標(biāo)的方式來實(shí)現(xiàn)切換

test.wxml

<view class='content'>
<view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0' bindtouchmove="handletouchmove">1111</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1' bindtouchmove="handletouchmove">222</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2' bindtouchmove="handletouchmove">333</view>

test.wxss

page {
width: 100%;
height: 100%;
}
 
.content {
width: 100%;
display: flex;
justify-content: space-around;
}
 
.tab {
width: 30%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #f0f0f0;
padding: 5rpx;
}
 
.type-item-on {
border-bottom: 4rpx solid #e64340;
color: red;
}
 
.tab1 {
width: 100%;
height: 100%;
background: orange;
}

test.js

//logs.js
Page({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 tab: [{
  title: '111',
  id: 0
 },
 {
  title: '222',
  id: 1
 },
 {
  title: '333',
  id: 3
 },
 
 ],
 idx: 0, //默認(rèn)選中第一項(xiàng)
 
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 
 },
 // tab
 tab(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
  idx: index,
 })
 
 }
})

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

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

相關(guān)文章

  • 18個(gè)JavaScript編寫簡潔高效代碼的技巧分享

    18個(gè)JavaScript編寫簡潔高效代碼的技巧分享

    在這篇文章中,小編將和大家分享18個(gè)JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧
    2024-01-01
  • JavaScript數(shù)值數(shù)組排序示例分享

    JavaScript數(shù)值數(shù)組排序示例分享

    在Javascript中我們已知有兩個(gè)可以直接用來進(jìn)行數(shù)組排序的方法reverse()和sort()。其中reverse()是按照反向?qū)τ跀?shù)組進(jìn)行排序的，而sort()是按照正向進(jìn)行排序的。
    2014-05-05
  • 使用純原生JS實(shí)現(xiàn)大文件分片上傳

    使用純原生JS實(shí)現(xiàn)大文件分片上傳

    前段時(shí)間在工作中接觸到了文件上傳的內(nèi)容,但業(yè)務(wù)中實(shí)現(xiàn)的功能比較簡單,于是我想著能不能使用純原生的方式實(shí)現(xiàn)一個(gè)大文件的上傳DEMO,從而在本質(zhì)上學(xué)習(xí)大文件上傳的思路,本教程使用純原生的html+node.js實(shí)現(xiàn),需要的朋友可以參考下
    2024-06-06
  • javascript網(wǎng)頁關(guān)鍵字高亮代碼

    javascript網(wǎng)頁關(guān)鍵字高亮代碼

    非常不錯(cuò)的關(guān)鍵字高亮代碼，用js實(shí)現(xiàn)，這個(gè)方法不錯(cuò)
    2008-07-07
  • 詳解如何在Javascript中使用Object.freeze()

    詳解如何在Javascript中使用Object.freeze()

    這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • js利用遞歸與promise 按順序請求數(shù)據(jù)的方法

    js利用遞歸與promise 按順序請求數(shù)據(jù)的方法

    這篇文章主要介紹了js利用遞歸與promise 按順序請求數(shù)據(jù),需要的朋友可以參考下
    2019-08-08
  • JS面向?qū)ο笾噙x框?qū)崿F(xiàn)

    JS面向?qū)ο笾噙x框?qū)崿F(xiàn)

    這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • js如何獲取兄弟、父類等節(jié)點(diǎn)

    js如何獲取兄弟、父類等節(jié)點(diǎn)

    本文為大家介紹下js獲取兄弟、父類等節(jié)點(diǎn)的方法，感興趣的朋友可以參考下
    2014-01-01
  • Javascript常用字符串判斷函數(shù)代碼分享

    Javascript常用字符串判斷函數(shù)代碼分享

    這篇文章主要分享了一段Javascript常用字符串判斷函數(shù)的代碼，基本上常見的字符串判斷都涵蓋在內(nèi)了，非常實(shí)用，小伙伴們參考下。
    2014-12-12
  • 微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼

    微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼

    這篇文章主要介紹了微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-12-12

最新評論