微信小程序(返回顶部功能)

//创建组件backTop

backTop.json

{"component": true,    //作为组件使用"usingComponents": {}
}

backTop.js

Component({properties: {//回顶部按钮距离底部距离 rpxbottom: {type: Number,value: 120},//回顶部按钮距离右侧距离 rpxright: {type: Number,value: 24},//距离顶部多少距离显示 pxtop: {type: Number,value: 100},//滚动距离scrollTop: {type: Number,observer(val) {this.change();}}},data: {//判断是否显示visible: false,//控制显示，主要解决调用api滚到顶部fixed元素抖动的问题toggle: true},methods: {goTop: function () {this.setData({toggle: false})wx.pageScrollTo({scrollTop: 0,duration: 250})setTimeout(() => {this.setData({toggle: true})}, 220)},change() {let show = this.data.scrollTop > this.data.top;if ((show && this.data.visible) || (!show && !this.data.visible)) {return}this.setData({visible: show})}}
})

backTop.wxml

<view class="tui-scroll-top" style="bottom:{{bottom}}rpx;right:{{right}}rpx" hidden="{{!visible || !toggle}}" catchtap="goTop"><image class="tui-scroll-top-img" src="https://img-blog.csdnimg.cn/2022010617411254252.png"></image>
</view>

backTop.wxss

.tui-drawer {visibility: hidden;
}.tui-drawer-show {visibility: visible;
}.tui-drawer-show .tui-drawer-mask {display: block;opacity: 1;
}.tui-drawer-show .tui-drawer-container {opacity: 1;
}.tui-drawer-show.tui-drawer-left .tui-drawer-container,
.tui-drawer-show.tui-drawer-right .tui-drawer-container {transform: translate3d(0, -50%, 0);
}.tui-drawer-mask {opacity: 0;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 8888;background: rgba(0, 0, 0, 0.6);transition: all 0.3s ease-in-out;
}.tui-drawer-container {position: fixed;left: 50%;width: 88%;height: 100%;top: 0;transform: translate3d(-50%, -50%, 0);transform-origin: center;transition: all 0.3s ease-in-out;z-index: 99999;opacity: 0;overflow-y: scroll;background: #fff;-webkit-overflow-scrolling: touch;-ms-touch-action: pan-y cross-slide-y;-ms-scroll-chaining: none;-ms-scroll-limit: 0 50 0 50;
}.tui-drawer-left .tui-drawer-container {left: 0;top: 50%;transform: translate3d(-100%, -50%, 0);
}.tui-drawer-right .tui-drawer-container {right: 0;top: 50%;left: auto;transform: translate3d(100%, -50%, 0);
}
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}

//父页面goodsList中引入backTop组件

goodsList.json

{"usingComponents": {//引入组件"tui-scroll-top": "/components/common/backTop/backTop","drawer": "/components/common/drawer/drawer"}
}

goodsList.wxml

<view><!-- 引入组件--><tui-scroll-top scrollTop="{{scrollTop}}"></tui-scroll-top></view>

goodsList.js

Page({data: {scrollTop: 0,     //返回顶部}
})

//来自很不错的一款微信小程序UI组件库: https://github.com/dingyong0214/ThorUI

微信小程序(返回顶部功能)相关推荐

微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序与卡券功能小结
微信小程序与卡券功能小结前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...
python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序 ...
微信小程序-000-签到功能-011-我报名过的活动-查看详情
微信小程序-000-签到功能-011-我报名过的活动-查看详情目录一.wxml 二.js pages.joinsetact.joinsetact 一.wxml {{aid}} <button ...
人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示人才招聘微信小程序企业入驻及 ...
微信小程序搜索php,如何解决微信小程序没有模糊搜索功能
现在微信小程序有重新推出新的功能,那就是进行模糊搜索,但是很多朋友微信小程序没有模糊搜索功能怎么办,下文小编就为大家带来详细介绍,一起看看吧现在微信小程序有重新推出新的功能,那就是进行模糊搜索,用户 ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...

微信小程序(返回顶部功能)

//创建组件backTop

//来自很不错的一款微信小程序UI组件库: https://github.com/dingyong0214/ThorUI

微信小程序(返回顶部功能)相关推荐

最新文章

热门文章