這篇文章主要介紹了微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商,擁有專(zhuān)業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù),十多年企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都1000+客戶提供網(wǎng)頁(yè)設(shè)計(jì)制作,網(wǎng)站開(kāi)發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營(yíng)銷(xiāo)型網(wǎng)站建設(shè),品牌網(wǎng)站制作,同時(shí)也為不同行業(yè)的客戶提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè),傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)。
基本邏輯:
1.給每個(gè)view自定義dataIndex屬性,從0開(kāi)始
2.自定義一個(gè)名為selected的class,作為被選中后的樣式
3.在wx.js中給viewId屬性賦為0,用于默認(rèn)顯示。
4.給每個(gè)view添加一個(gè)點(diǎn)擊事件select,在點(diǎn)擊某個(gè)view時(shí) 將dataIndex變成這個(gè)view的自定義index
5.在view中添加一個(gè)三木運(yùn)算符用于控制選中樣式 {{dataIndex == 0 ? 'selected':''}}
附圖:
wxml
<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
<view class="iconfont icon-haoping ic" ></view>好評(píng)
</view>
<view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'>
<view class="iconfont icon-zhongping ic"></view>中評(píng)
</view>
<view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
<view class="iconfont icon-bottom-comment ic"></view>差評(píng)
</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,所以會(huì)默認(rèn)第一個(gè)切換了樣式。
這樣就完成了該事件:

里面還有幾個(gè)不足之處,時(shí)間倉(cāng)促,暫且就這樣寫(xiě)了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
名稱(chēng)欄目:微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析
URL分享:http://www.chinadenli.net/article44/gcchhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、軟件開(kāi)發(fā)、服務(wù)器托管、用戶體驗(yàn)、網(wǎng)站改版、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)