继续总结在小程序项目开发之中认为值得去记录的要点。本篇包括 globalData、wx.reLaunch 和 bindscrolltolower。
globalData
还是之前的小程序项目，需求是另一个二维码入口进入小程序时，页面内容的一些小的细节和正常入口渲染不同。可以采用的方法是在全局 app.js 的 globalData 全局数据里面添加一个布尔类型进行判断。
app.js
globalData: {
userInfo: null,
...,
isTravel: false, // 判断是否是旅游商城入口
},
例如这个入口有一个登陆页，在这个登录页进行登陆成功时，说明是另外的入口进入小程序，修改 globalData 全局数据的 isTravel 值为 true。
渲染
在其他 wxml 页面进行 wx:if 条件渲染时，不能直接在双括号插值表达式里面添加 app.globalData.isTravel 来进行判断。
应该先在相应页面对应的 JS 中将 app.globalData.isTravel 的值取到，然后再转存到自己页面 JS 的 data 中。通过双括号插值表达式里面添加 isTravel 来判断渲染方式。
相应页面
// 相应页面.js
var isTravel = app.globalData.isTravel
data: {
isTravel: isTravel, // 键值相同可缩略
}
wx.reLaunch
之前通过组件的方式在 tabbar 页面加载了首页、购物车、我的三个组件。在首页进入到商品详情页的时候，发现点击商品详情页的购物车按钮，跳转到的是正常入口小程序的 tabbar 页。
由于需求是在另外一个入口进入小程序的情况下，不能让用户有任何的情况回到正常入口的页面，所以需要修复这个跳转 bug。除了要给这个详情页的购物车按钮添加条件渲染（通过 isTravel 判断）之外，还需要修改他的跳转方式。
使用 wx.reLaunch 跳转到组件页（显示购物车组件），而不是跳转到正常入口的购物车页。wx.reLaunch 方法会在跳转页面之后，同时关闭所有其他页面。在方法的 url 之中传递一个参数 id ，并同时在组件页的 onLoad 生命周期中使用 option 取到这个参数。
详情页按钮事件
// 详情页 购物车按钮
navTo_Travel() {
wx.reLaunch({
url: '/pages/travel_shop/travel?id=1'
})
},
自定义 tabbar 组件页
在 onLoad 中使用 option.id 取到参数，并在取到的时，将 currentTab 置为 1 。
// 自定义 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 事件
<scroll-view class="content" scroll-y style='height:{{main_height}}px' bindscrolltolower='scrollBottom'>
...
待渲染内容... {{item.xxx}}
...
</scroll-view>
组件 JS
在相应组件 JS 的生命周期中先写入类似原生 onLoad 的方法，让页面加载时就执行，这里是因为必须要给 scroll-view 一个高度。到后面使用 bindscrolltolower 的时候才能够通过这个高度来触发事件。
这是一个很关键的地方，除此之外在全局的
app.wxss中page或最外层容器的class.container的height也应该设置为100%。如果不设置好这些，会导致在使用bindscrolltolower时虽然页面触底但无法触发事件。
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 一样的请求即可。
scrollBottom () {
// 写相应的分页加载请求即可
}
通过这种方式，可以实现自定义 component 组件的上拉触底刷新。
网友评论