开门见山先上效果吧!感觉可鉯的用的上的再往下看。()
心动吗那就继续往下看!
先上页面结构吧,也就是wxml文件其实可以理解成微信自己封装过的html,这个不哆说了不懂也没必要往下看了。
做该效果样式就不多说了一个默认状态样式,一个当前选中样式(开发的时候,注意class的命名盡量不要使用层级嵌套,所以class取名的时候要注意唯一性)
js部分:该效果基于小程序的组件 scroll-view 开发的利用bindscroll事件加载回调函数。
通过滾动宽度和每个item的宽度从而获取当前滚动的item是第几位然后给对应的item加上选中class,其他的则去除选中class
ps:有时候一些酷炫的效果其实实现起来非常简单,建议开发前先理清实现思路虽然整个文章言简意赅,能看懂就自然懂乐在分享。