值得记录的 (七) - 微信小程序 globalData / reLaunch / 自定义组件触底刷新

继续总结在小程序项目开发之中认为值得去记录的要点。
本篇包含globalDatawx.reLaunchbindscrolltolower

globalData

还是之前的小程序项目,需求是另一个二维码入口进入小程序时,页面内容的一些小的细节和正常入口渲染不同。可以采用的方法是在全局 app.jsglobalData 全局数据里面添加一个布尔类型进行判断。

app.js

1
2
3
4
5
globalData: {
userInfo: null,
...,
isTravel: false, // 判断是否是旅游商城入口
},

例如这个入口有一个登陆页,在这个登录页进行登陆成功时,说明是另外的入口进入小程序,修改 globalData 全局数据的 isTravel 值为 true

渲染

在其他 wxml 页面进行 wx:if 条件渲染时,不能直接在双括号插值表达式里面添加 app.globalData.isTravel 来进行判断。

应该先在相应页面对应的 JS 中将 app.globalData.isTravel 的值取到,然后再转存到自己页面 JSdata 中。通过双括号插值表达式里面添加 isTravel 来判断渲染方式。

相应页面

1
2
3
4
5
6
// 相应页面.js
var isTravel = app.globalData.isTravel

data: {
isTravel: isTravel, // 键值相同可缩略
}


wx.reLaunch

之前通过组件的方式在 tabbar 页面加载了首页、购物车、我的三个组件。在首页进入到商品详情页的时候,发现点击商品详情页的购物车按钮,跳转到的是正常入口小程序的 tabbar 页。

由于需求是在另外一个入口进入小程序的情况下,不能让用户有任何的情况回到正常入口的页面,所以需要修复这个跳转 bug。除了要给这个详情页的购物车按钮添加条件渲染(通过 isTravel 判断)之外,还需要修改他的跳转方式。

使用 wx.reLaunch 跳转到组件页(显示购物车组件),而不是跳转到正常入口的购物车页。wx.reLaunch 方法会在跳转页面之后,同时关闭所有其他页面。在方法的 url 之中传递一个参数 id ,并同时在组件页的 onLoad 生命周期中使用 option 取到这个参数。

详情页按钮事件

1
2
3
4
5
6
// 详情页 购物车按钮
navTo_Travel() {
wx.reLaunch({
url: '/pages/travel_shop/travel?id=1'
})
},


自定义 tabbar 组件页

onLoad 中使用 option.id 取到参数,并在取到的时,将 currentTab 置为 1

1
2
3
4
5
6
7
8
9
10
// 自定义 tabbar 组件页 JS
onLoad: function (option) {
let that = this
// 如果是旅游商城详情页跳转过来的进入组件购物车页
if(option.id == 1) {
that.setData({
currentTab: 1,
})
}
}


bindscrolltolower

由于之前使用了 component 组件,在自定义组件之中,由于无法使用微信小程序原生自带的生命周期,因此无法在自定义组件之中,使用原生的 onReachBottom 来处理上拉触底事件。这里就可以使用 scroll-view 标签所带的 bindscrolltolower 方法来实现相同的触底刷新,但需要定义事件。

详细属性参考 scroll-view 官方文档

scroll-view 标签

在模板标签中通过内联 style 结合组件 JS 动态获取到 scroll-view 的真实高度,并且通过 bindscrolltolower 定义一个 scrollBottom 事件

1
2
3
4
5
<scroll-view class="content" scroll-y style='height:{{main_height}}px' bindscrolltolower='scrollBottom'>
...
待渲染内容... {{item.xxx}}
...
</scroll-view>


组件 JS

在相应组件 JS 的生命周期中先写入类似原生 onLoad 的方法,让页面加载时就执行,这里是因为必须要给 scroll-view 一个高度。到后面使用 bindscrolltolower 的时候才能够通过这个高度来触发事件。

这是一个很关键的地方,除此之外在全局的 app.wxsspage 或最外层容器的 class .containerheight 也应该设置为 100% 。如果不设置好这些,会导致在使用 bindscrolltolower 时虽然页面触底但无法触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
lifetimes: {
// 组件生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {
//显示设置
var res = wx.getSystemInfoSync();
var patt1 = new RegExp("iOS");
var result = patt1.test(res.system);
let tmp = 0;
let h = res.windowHeight - res.windowWidth / 750 * 116 - tmp;
this.setData({
main_height: h, // 传给 scroll-view 模板的高度
});
},


scrollBottom

然后在 scrollBottom 中写和 onReachBottom 一样的请求即可。

1
2
3
scrollBottom () {
// 写相应的分页加载请求即可
}



通过这种方式,可以实现自定义 component 组件的上拉触底刷新。

本文结束  感谢您的阅读
0%