这篇文章主要介绍了微信小程序点击切换样式滚动视图实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
<强>滚动视图滚动视图点击切换样式
<强> * .wxml
& lt;视图类=澳谌荨痹?
& lt;视图类=皀avbg”比;
& lt;视图类=暗己健北?
& lt;滚动视图类=" scroll-view_H " scroll-x=" true "比;
& lt;视图类=皊croll-view_H”比;
& lt; view> & lt;视图类="{{国旗==0 & # 63;“选择”:“正常”}}" id=" 0 " bindtap=" switchNav”在推荐& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{标志==1 & # 63;“选择”:“正常”}}" id=" 1 " bindtap=" switchNav”在热点& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==2 & # 63;“选择”:“正常”}}" id=" 2 " bindtap=" switchNav”在北京& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==3 & # 63;“选择”:“正常”}}" id=" 3 " bindtap=" switchNav”祝辞社会& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==4 & # 63;“选择”:“正常”}}" id=" 4 " bindtap=" switchNav“祝辞娱乐& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==5 & # 63;“选择”:“正常”}}" id=" 5 " bindtap=" switchNav”祝辞问答& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==6 & # 63;“选择”:“正常”}}" id=" 6 " bindtap=" switchNav”在图片& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==7 & # 63;“选择”:“正常”}}" id=" 7 " bindtap=" switchNav”在科技& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==8 & # 63;“选择”:“正常”}}" id=" 8 " bindtap=" switchNav”在汽车& lt;/view> & lt;/view>
& lt; view> & lt;视图类="{{国旗==9 & # 63;“选择”:“正常”}}" id=" 9 " bindtap=" switchNav”的在体育& lt;/view> & lt;/view>
& lt;/view>
& lt;/scroll-view>
& lt;/view>
& lt;视图类=疤砑印弊４? & lt;/view>
& lt;/view>
& lt;/view>
<强> * .wxss
.navbg {
background - color: # F6F5F3;
高度:36 px;
颜色:# 000000;
显示:flex;
flex-direction:行;
对齐项目:中心;
}
.nav {
宽度:85%;
高度:36 px;
}
阀门{
宽度:15%;
高度:50 px;
行高:50 px;
text-align:正确;
margin-right: 10 px;
字体大小:50 px;
}
.scroll-view_H {
高度:40像素;
显示:flex;
flex-direction:行;
margin-left: 5 px;
}
.normal {
宽度:40像素;
高度:40像素;
行高:40像素;
padding-left: 5 px;
padding-right: 5 px;
字体大小:14 px;
}
.select {
宽度:40像素;
高度:40像素;
行高:40像素;
padding-left: 5 px;
padding-right: 5 px;
字体大小:14 px;
粗细:大胆的;
颜色:天蓝色;
}
<强> * . js
数据:{
国旗:0,
},
switchNav:函数(e) {
console.log (e.currentTarget.id);
this.setData ({
国旗:e.currentTarget.id
})
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
