微信小程序?qū)崿F(xiàn)默認第一個選中變色效果
更新時間：2018年07月17日 09:15:30 作者：onlineline
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)默認第一個選中變色效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
效果圖：
這里默認第一個選中 點擊每個不會改變樣式 根據(jù)index來實現(xiàn)
wxml：
頁面class有三目運算
<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 藍色 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： 定義一個idx:0 默認為0 拿到每個index
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
list:[
{'num':'我是第一個'},
{ 'num': '我是第二個' },
{ 'num': '我是第三個' },
{ 'num': '我是第四個' },
{ 'num': '我是第五個' },
{'num':'我是第六個'},
{ 'num': '我是第七個' },
{ 'num': '我是第八個' },
{ 'num': '我是第九個' },
{ 'num': '我是第十個' }
],
idx : 0
},
goIndex (e) {
let index = e.currentTarget.dataset.index;
// console.log('每個index',index)
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
想要實現(xiàn)點擊變色的話
如圖：
點擊第二個 第二個變藍色 其余變黑色
點擊第三個 第三個變藍色 其余變黑色... 只需要給idx賦值即可
goIndex (e) {
let index = e.currentTarget.dataset.index;
// console.log('每個index',index)
this.setData({
idx: index
})
},
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)默認第一個選中變色效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法,以實例形式分析了輪詢操作的原理與javascript實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
js toFixed()方法的重寫實現(xiàn)精度的統(tǒng)一
凡用過js 中的toFix() 方法的， 應該都知道這個方法存在一個小小的BUG，在IE 下和FF 下對于小數(shù)的進位有點不同2014-03-03
這篇文章主要介紹了JavaScript學習筆記之數(shù)組隨機排序的相關(guān)資料,需要的朋友可以參考下2016-03-03
thinkphp標簽實現(xiàn)bootsrtap輪播carousel實例代碼
這篇文章給大家介紹thinkphp標簽實現(xiàn)bootsrtap輪播carousel實例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容，需要的朋友可以參考一下2022-07-07
JavaScript的Number對象的toString()方法
toString()方法可以把Number對象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對象的toString()方法，對javascript對象方法相關(guān)知識感興趣的朋友一起學習吧2015-12-12
這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章給大家描述的是如何一步步簡單的實現(xiàn)Javascript 字符串模板，對于初學javascript的菜鳥們來說應該是篇不錯的文章，希望對大家能夠有所幫助。2016-02-02
這篇文章主要介紹了純JS代碼實現(xiàn)隔行變色鼠標移入高亮的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
老司機們，你知道JSON.stringify還有第二個和第三個可選參數(shù)嗎？它們是什么呢？是不是感到不可思議？下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-08-08