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

  • 时间:2018-11-25 22:47 作者:evenyao 来源:evenyao 阅读:34
  • 扫一扫,手机访问
摘要:继续总结在小程序项目开发之中认为值得去记录的要点。本篇包括 globalData、wx.reLaunch 和 bindscrolltolower。globalData还是之前的小程序项目,需求是另一个二维码入口进入小程序时,页面内容的少量小的细节和正常入口渲染不同。可以采用的方法是在全局 app.j

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

globalData

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

app.js

globalData: {  userInfo: null,  ...,    isTravel: false,  // 判断能否是旅游商城入口},

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

渲染

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

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

相应页面

// 相应页面.jsvar isTravel = app.globalData.isTraveldata: {  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 组件页 JSonLoad: 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.wxsspage 或者最外层容器的 class .containerheight 也应该设置为 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 组件的上拉触底刷新。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】不花钱推广小程序的方法(2018-12-18 23:20)
【系统环境|服务器应用】MySQL基本使用(2018-12-18 23:20)
【系统环境|服务器应用】iOS混编Flutter优化&注意(2018-12-18 23:19)
【系统环境|服务器应用】iOS - 最易用的数据库工具类 `XWDatabase` 开源(2018-12-18 23:19)
【系统环境|服务器应用】《iOS设计模式解析》总结(2018-12-18 23:19)
【系统环境|服务器应用】#程序员入职一月就离任,领导竟直接撕破脸皮:招你进来真是瞎了眼(2018-12-18 23:19)
【系统环境|服务器应用】前台埋点统计方案思考(2018-12-18 23:19)
【系统环境|服务器应用】Java 哪些事最困扰你?(2018-12-18 23:19)
【系统环境|服务器应用】vue项目中api接口管理总结(2018-12-18 23:18)
【系统环境|服务器应用】Hive详情与核心知识点(2018-12-18 23:18)
手机二维码手机访问领取大礼包
返回顶部