背景:
小程序的开发中会遇到很多通用的操作小按钮,最常见的就是回顶部、回首页、点赞、收藏等。他们会分布于各种需要交互的页面。在交互一致的情况下,为了减少重复的代码和后期维护,通常都会将它们抽成单独的组件。分享个【回顶部】组件的简单写法,也是给自己做一个记录。
开发步骤
- 新建一个goTop组件文件包,含小程序规范的几个文件js/wxml/json
- 开发代码,在需要引用页面的对应配置文件中加入组件配置
- 在引用的wxml中加入组件代码和传参,js文件写参数的交互
效果图
回顶部效果图代码概览
1.goTop / goTop.wxml
备注:go_top.png是一个白底的正方形图片
<!--回顶部-->
<view wx:if="{{showTop}}" catchtap="toTop">
<image src="../../images/icons/go_top.png"></image>
</view>
2.goTop / goTop.json
{
"component": true
}
3.goTop / goTop.js
Component({
properties: {
showTop: {
type: Boolean,
value: false
}
},
data: {
},
methods:{
// 回顶部事件
toTop:function(){
wx.pageScrollTo({
scrollTop: 0,
duration: 500
})
}
}
})
4.app.wxss
备注:因为多个模块样式一致,因此把样式抽出去了,下图只放出go-top部分~亦可单独写在goTop.wxss中
.go-top{
position:fixed;
right:28rpx;
bottom:80rpx;
}
.go-top image{
padding:16rpx;
width:48rpx;
height:48rpx;
background:#fff;
border-radius:40rpx;
box-shadow:0 4rpx 10rpx #707070;
}
↓组件开发已经完成,接下去是组件的使用↓
1.demo.json
备注:usingComponents加入对应组件配置即可
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "DemoTitle",
"usingComponents": {
"go-top": "/component/goTop/goTop"
}
}
2.demo.wxml
备注:showTop通过滚动事件触发取值
<view>
<!-- S 其他业务代码 -->
<!-- E 其他业务代码 -->
<!-- 回顶部组件 -->
<go-top class="go-top" showTop="{{showTop}}"></go-top>
</view>
3.demo.js
备注:删除了其他业务代码,仅剩和回顶部组件相关的交互,便于阅读。onPageScroll是小程序开放出来的一个页面事件,用于监听页面的滚动,但有一定的延时。
Page({
data: {
showTop:false
},
onPageScroll(e){
//参数e会返回滚动条滚动的高度
if(e.scrollTop>1200){
this.setData({
showTop:true
})
}else{
this.setData({
showTop:false
})
}
}
})
其他说明:
以上代码中样式go-top我是写在demo.wxml引用中的,因为其代码写在app.wxss里,如果是写在goTop.wxss中则模块样式名直接写在goTop.wxml的结构中即可。app.wxss中的样式和组件内的样式是独立的,不干扰不影响。如果样式写在外部,样式名写在内部则不会生效!
通过该方式亦可扩展多个右侧悬浮按钮,通过传参控制其显示与否!
完...
网友评论