关于微信小程序如何开发的问题,其实要真正细说的话,需要很长的篇幅。下面我们挑选其中的两个开发内容进行分析,跟大家分享一下小程序开发过程中的锚点以及滚动加载的开发技巧。
1、锚点
以往内<navigator>的url只能是app.json里配置的路由,它只支持查询字符串,不支持hash,所以不能通过链接做锚点。但是,微信平台提供了<scroll-view>,可以利用它来做微信小程序开发锚点,具体实现如下:
wxml文件
<view>
<button data-hash="hash1" bindtap="goHash">点击定向hash1</button>
<button data-hash="hash2" bindtap="goHash">点击定向hash2</button>
</view>
<scroll-view scroll-y="true" scroll-into-view="{{toView}}">
<view id="hash1"></view>
<view id="hash2"></view>
</scroll-view>
js文件
Page({
data: {
toView: 'hash1'
},
goHash (e) {
let hash = e.currentTarget.dataset.hash
this.setData({
toView: hash
})
}
})
不过,值得注意的是,这种方式下实现的,只能点击按钮,跳转锚点,屏幕滑动到相应锚点,toView属性不会相应改变。
2、滚动加载
微信没有document、window对象,因此在开发小程序时也无法使用onscroll,只能借助微信提供的<scroll-view>,去实现滚动加载。实现如下:
wxml文件
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>
<view wx:for="{{movies}}" wx:key="index">
{{item.name}}
</view>
</scroll-view>
js文件
Page({
data: {
movies: []
},
getMovies () {
let _self = this
wx.request({
url: 'https://......',
data: {},
success: function(res) {
// res.data才是你后端返回的真实数据
_self.setData({
movies: res.data
})
}
})
},
loadMovies () {
// 得到要更新的数据,setData重置movies
}
})