欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序小技巧《十七》富文本组件wxParse,制作回到顶部按钮 ... ...

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

微信小程序小技巧《十七》富文本组件wxParse,制作回到顶部按钮 ... ...

发布时间:2020-12-19  

我们先看一下效果吧,直接上图。

第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。

微信小程序小技巧《十七》富文本组件wxParse,制作回到顶部按钮 ... ...

第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现

微信小程序小技巧《十七》富文本组件wxParse,制作回到顶部按钮 ... ...

接下就是对代码的分析了: 
在这里我们如果要使用滚动事件的话,
小程序规定 最外层一定要使用scroll-view标签进行包裹,然后在设置scroll-y=”true” 意思是允许页面了纵向滚动,scroll-top是滚动到顶部做处理,一般绑定一个事件,bindscrolltolower同样的原理,滚动到底部做处理,bindscroll表示在滚动的时候出发这个事件。下面WXML内部的话,就是我们回到顶部的按钮设置,我们在点击它时绑定一个事件goTop,让他的滚动高度等于0,这样它就回到顶部了。

WXML代码:

<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll"