这篇文章主要介绍了微信小程序点击切换样式滚动视图实现代码实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下

滚动视图滚动视图点击切换样式

*.页面结构

view class=' content ' view class=' nav BG ' view class=' nav ' scroll-view class=' scroll-view _ H ' scroll-x=' true ' view class=' scroll-view _ H ' view class=' { { flag==0 ' '选择： ' normal ' } } ' id=' 0 ' bind tap=' SwitChNav '推荐/view/view view class=' { { flag==1？'选择： ' normal ' } } ' id=' 1 ' bind tap=' SwitChNav '热点/view/view view view class=' { { flag==2 '？选择： ' normal ' } } ' id=' 2 ' bind tap=' SwitChNav '北京/view/view view view class=' { { flag==3 '？选择： ' normal ' } } ' id=' 3 ' bind tap=' SwitChNav '社会/view/view view view class=' { { flag==4 '？选择： ' normal ' } } ' id=' 4 ' bind tap=' SwitChNav '娱乐/view/view view view class=' { { flag==5？'选择： ' normal ' } } ' id=' 5 ' bind tap=' SwitChNav '问答/view/view view view class=' { { flag==6 '？选择： ' normal ' } } ' id=' 6 ' bind tap=' SwitChNav '图片/view/view view view class=' { { flag==7？'选择： ' normal ' } } ' id=' 7 ' bind tap=' SwitChNav '科技/view/view view view class=' { { flag==8？'选择： ' normal ' } } ' id=' 8 ' bind tap=' SwitChNav '汽车/view/view view view class=' { { flag==9？'选择： ' normal ' } } ' id=' 9 ' bind tap=' SwitChNav '体育/view/view/view/scroll-view/view view class=' add '/view/view/view * .页面样式表。nav BG {底色： # F6F 5 F3height : 36pxcolor : # 000000 display : flex flex-direction : row；align-items:居中；}.nav { width : 85%；高度：36px }。添加{宽度：15%；高度： 50px线高： 50px文本对齐：右侧；右边距： 10pxfont-size : 50px}.scroll-view _ H { height : 40px；display : flex flex-方向：行；左边距left: 5px}。正常{ width: 40px高度： 40px线高： 40px左衬垫左： 5px填充-右侧： 5pxfont-size : 14px}.选择{ width: 40px高度： 40px线高： 40px左衬垫左： 5px填充-右侧： 5pxfont-size : 14px字体粗细：粗体；color: skyblue}*。射流研究…

data: { flag:0 }，} switch nav :函数{控制台。日志(例如CurrentTarget。id)；这个。setdata({ flag : e . CurrentTarget。id })}，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。