微信小程序?qū)崿F(xiàn)默認(rèn)第一個(gè)選中變色效果

更新時(shí)間：2018年07月17日 09:15:30 作者：onlineline

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)默認(rèn)第一個(gè)選中變色效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

效果圖：

這里默認(rèn)第一個(gè)選中點(diǎn)擊每個(gè)不會(huì)改變樣式根據(jù)index來(lái)實(shí)現(xiàn)

wxml：

頁(yè)面class有三目運(yùn)算

<view class='box'>
 <view class='box-container' wx:for="{{list}}" wx:key="list">
  <view class="{{index==idx?'_left':'left'}}" bindtap='goIndex' data-index="{{index}}">{{item.num}}</view>
 </view>
</view>

wxss：

_left 藍(lán)色 left 黑色

.box{
 width: 100%;
 height: auto;
 border-top: 1px solid #efefef;
}
.box-container{
 width:90;
 display: flex;
 height: 100rpx;
 align-items: center;
 border-bottom: 1px solid #efefef;
}
.left{
 margin-left: 40rpx;
 font-size: 26rpx;
}
._left{
 margin-left: 40rpx;
 font-size: 26rpx;
 color: #14a1fd;
}

js：定義一個(gè)idx:0 默認(rèn)為0 拿到每個(gè)index

/**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  list:[
   {'num':'我是第一個(gè)'},
   { 'num': '我是第二個(gè)' },
   { 'num': '我是第三個(gè)' },
   { 'num': '我是第四個(gè)' },
   { 'num': '我是第五個(gè)' },
   {'num':'我是第六個(gè)'},
   { 'num': '我是第七個(gè)' },
   { 'num': '我是第八個(gè)' },
   { 'num': '我是第九個(gè)' },
   { 'num': '我是第十個(gè)' }  
  ],
  idx : 0
 },
 goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每個(gè)index',index)
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
 },

想要實(shí)現(xiàn)點(diǎn)擊變色的話

如圖：

點(diǎn)擊第二個(gè) 第二個(gè)變藍(lán)色其余變黑色

點(diǎn)擊第三個(gè) 第三個(gè)變藍(lán)色其余變黑色... 只需要給idx賦值即可

 goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每個(gè)index',index)
  this.setData({
   idx: index
  })
 },

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)默認(rèn)第一個(gè)選中變色效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

原生JS實(shí)現(xiàn)可拖拽登錄框
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)可拖拽登錄框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
ECMAScript 基礎(chǔ)知識(shí)
ECMAScript 基礎(chǔ)知識(shí)...
2007-06-06
javascript中this用法實(shí)例詳解
這篇文章主要介紹了javascript中this用法,結(jié)合具體實(shí)例形式詳細(xì)分析了javascript中this的含義及對(duì)象、函數(shù)等各種調(diào)用中的使用技巧,需要的朋友可以參考下
2017-04-04
用javascript實(shí)現(xiàn)頁(yè)內(nèi)搜索的腳本代碼
用javascript實(shí)現(xiàn)頁(yè)內(nèi)搜索的腳本代碼...
2007-08-08
SWFObject Flash js調(diào)用類(lèi)
一直想為 SWFObject 這個(gè)JS的類(lèi)庫(kù)寫(xiě)一個(gè)推薦帖，因?yàn)樗p便，同時(shí)功能強(qiáng)大，為我們的開(kāi)發(fā)帶來(lái)了很大的便捷。
2008-07-07
JavaScript實(shí)現(xiàn)模仿桌面窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)模仿桌面窗口的方法,可實(shí)現(xiàn)模仿桌面窗口的打開(kāi)、關(guān)閉、移動(dòng)、縮放及最大化、最小化等功能,需要的朋友可以參考下
2015-07-07
JavaScript 語(yǔ)言的遞歸編程
關(guān)于遞歸的解釋見(jiàn)《SICP》第1章。下面是個(gè)簡(jiǎn)單的遞歸編程題目。
2010-05-05
js獲取鼠標(biāo)點(diǎn)擊的位置實(shí)現(xiàn)思路及代碼
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置，但僅使用這個(gè)方法是不夠的，感興趣的朋友可以了解本文
2014-05-05
JavaScript前端巧妙實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新詳解
作為開(kāi)發(fā)者,我們常面對(duì)復(fù)雜的開(kāi)發(fā)環(huán)境,要應(yīng)對(duì)即時(shí)通訊與數(shù)據(jù)實(shí)時(shí)更新的問(wèn)題,那么該如何精準(zhǔn)高效實(shí)現(xiàn)這些功能呢,下面小編就來(lái)和大家簡(jiǎn)單講講
2025-03-03
JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開(kāi)語(yǔ)法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡(jiǎn)化
2022-06-06