微信小程序实现点击返回顶层的方法
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现点击返回顶层的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近在研究微信小程序,被这个返回顶层给坑了一波,狼蚁网站SEO优化贴代码
wxml代码
<scroll-view scroll-y style="height: 1000rpx;" scroll-="50" enable-back-to-="true" scroll-="{{scrollTop.scroll_}}" bindscroll="scrollTopFun"> <block wx:for="{{sortArr}}"> <template is="spL" data="{{item}}"></template> </block> </scroll-view> <!-- 联系客服 --> <view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view> <!-- 拨打电话 --> <view class="callOur fliexBox" bindtap="call">电话</view> <view class="fliexBox" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层</view>
js代码
var app = getApp(); Page({ data: { hidden: true, list: [], scrollTop: { scroll_: 0, goTop_show: false }, scrollHeight: 0, floorstatus:true, sortArr:[ { id: 1, img: "../../images/2.jpg", title: "君御豪园住宅", introduction: "杭州不限购不限贷口住宅", money: 5000, vperson: 115, tperson: 0 } ], }, scrollTopFun: function (e) { console.log(e.detail); if (e.detail.scrollTop > 300) {//触发go的显示条件 this.setData({ 'scrollTop.goTop_show': true }); } else { this.setData({ 'scrollTop.goTop_show': false }); } }, goTopFun: function (e) { var _ = this.data.scrollTop.scroll_;//发现设置scroll-值不能和上一次的值一样,否则无效,所以这里加了个判断 if (_ == 0) { _ = 1; } else { _ = 0; } this.setData({ 'scrollTop.scroll_': _ }); }, / 生命周期函数--监听页面加载 / onLoad: function (options) { var that = this; wx.getSystemInfo({ suess: function (res) { that.setData({ scrollHeight: res.windowHeight }); } }); }, })
wxss代码
.fliexBox{ width: 100rpx; height: 50rpx; background-color: #5db13b; color: #ffffff; text-align: center; position: fixed; right: 0rpx; bottom: 85rpx; border-radius: 20rpx 0rpx 0rpx 20rpx; font-size: 26rpx; line-height: 50rpx; opacity: .6; } .callOur{ bottom: 20rpx; } contact-button{ opacity: 0; position: absolute; }
主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样,可以是rpx,这样才可以监测到滑动的距离。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程