1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离,在data公共数据中定义scrollTop。
2、得到滑动距离后,当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位,因此为要在scroll-view中定义class="title{{scrollTop>30'topnav':''}}"30就是我需要定义的模块距离顶部的距离,当超过这个距离就会执行css的topnav样式。
3、否则就执行愿有的css样式。
微信小程序中scroll-into-view跳转到指定位置是这样使用的:
1、首先第一步,打开微信开发者工具。
2、其次第二步,打开wxml文件,然后在文件里先新建一个scroll-view的标签即可。
3、再次第三步,设置这个scroll-into-view滚动的方向设置为x轴,与此同时设置scroll-into-view的值,这个值就是子元素中的id,表示滚动到哪一个元素,如下图所示。
4、接下来就是设置子元素,先新建一个view的子元素,然后设置class和id,并且多设置几个view标签,以便观察效果。
5、最后一步,点击打开模拟器,在下面我们就可以看到滚动的元素,接着就按照我们之前设置的显示就行了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)