溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了微信小程序點擊view動態添加樣式過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
基本邏輯：
1.給每個view自定義dataIndex屬性，從0開始
2.自定義一個名為selected的class，作為被選中后的樣式
3.在wx.js中給viewId屬性賦為0，用于默認顯示。
4.給每個view添加一個點擊事件select，在點擊某個view時 將dataIndex變成這個view的自定義index
5.在view中添加一個三木運算符用于控制選中樣式 {{dataIndex == 0 ? 'selected':''}}
附圖：
wxml
<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
<view class="iconfont icon-haoping ic" ></view>好評
</view>
<view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'>
<view class="iconfont icon-zhongping ic"></view>中評
</view>
<view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
<view class="iconfont icon-bottom-comment ic"></view>差評
</view>
wxss
/* 表情盒子 */
.ICONBOX{
border: 1px solid red;
display: flex;
justify-content: space-around;
/* flex-direction: */
align-items: center;
color: #999;
font-size: 28rpx;
}
.ic{
margin-right: 5rpx;
}
.selected{
color: #f63
}
wxjs
data: {
viewId : 0
},
select:function(e){
this.setData({
viewId: e.currentTarget.dataset.index
})
},
由于viewId初始值是0，所以會默認第一個切換了樣式。
這樣就完成了該事件：
里面還有幾個不足之處，時間倉促，暫且就這樣寫了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
