<view class='page-header'> <text class='page-header-text'>{{title}}</text></view><scroll-view class='page-body' scroll-y='true' bindscrolltoupper='upper' bindscrolltolower='lower' scroll-top='100'> <navigator url='../detail/detail' wx:for='{{movies}}'> <view class='item'> <image src='{{item.images.small}}' class='poster'></image> <view class='meta'> <text class='title'>{{item.title}}</text> <text class='sub-title'>{{item.original_title}}({{item.year}})</text> <text class='artists'><text wx:for='{{item.directors}}'>{{item.name}}</text></text> </view> <text class='rating'><text>{{item.rating.average}}</text></text> </view> </navigator></scroll-view> |
//var utils = require('../../utils/util.js');var api_url = "https://api.douban.com/v2/movie/top250";Page({ /** * 页面的初始数据 */ data: { title:"加载中...", //顶部标题 movies: [], //电影列表 start: 0, //开始条数 flag: true, //是否打印日志 endflag: false //是否到达顶部或底部 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //第一次加载 this.top250(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { //console.log('onReady'); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { //console.log('onShow'); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 * 模拟实现下一页 */ onReachBottom: function () { if (this.data.start == 240) { //如果已经到达最后一页，就不在重复请求数据了 if (this.data.endflag == false) { this.top250(); this.setData({ endflag: true }) } else { this.setData({ endflag: true }) } } else { this.top250(); this.setData({ endflag: false }) } }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 页面滚动触发事件的处理函数 * 模拟实现上一页 */ onPageScroll: function (event) { var scrollTop = event.scrollTop; //模拟实现上一页 if (scrollTop==0){ this.setData({ //开始条数最小为0 start: ((this.data.start-40) < 0) ? 0 : (this.data.start-40) }); //如果已经到达第一页，就不在重复请求数据了 if (this.data.start == 0){ if (this.data.endflag == false){ this.top250(); this.setData({ endflag: true }) }else{ this.setData({ endflag: true }) } } else { this.top250(); this.setData({ endflag: false }) } } }, upper: function (e) { console.log(e) }, lower: function (e) { console.log(e) }, /** * 豆瓣电影Top250 */ top250: function () { var that = this; wx.showToast({ title: '加载中...', icon: 'loading', duration: 10000 }) wx.request({ url: api_url, data: { start: this.data.start }, header: { 'content-type': 'json' }, success: function (res) { wx.hideToast(); var data = res.data; if (that.data.flag == true) { console.log(data); } that.setData({ title: data.title, movies: data.subjects, //开始条数最大为240 start: ((that.data.start+20)>240) ? 240 : (that.data.start + 20) }) } }) }}) |
page { font-family: 'Microsoft YaHei'; background-color: #fff; display: flex; flex-direction: column;}.page-header { display: flex; justify-content: center; border-bottom: 2rpx solid #ccc; margin-bottom: 10rpx;}.page-header-text { padding: 20rpx 40rpx; color: #999; font-size: 40rpx;}.page-body { display: flex; flex: 1; flex-direction: column;}.item { display: flex; padding: 20rpx 40rpx; border-bottom: 2rpx solid #eee;}.poster { width: 128rpx; height: 128rpx; margin-right: 20rpx;}.item .meta { flex: 1;}.item .meta .title,.item .meta .sub-title { display: block; margin-bottom: 14rpx;}.item .meta .title { font-size: 32rpx;}.item .meta .sub-title { font-size: 22rpx; color: #c0c0c0;}.item .meta .artists { font-size: 26rpx; color: #999;}.item .rating { font-size: 28rpx; font-weight: bold; color: red;} |
使用竖向滚动时，需要给
<scroll-view/>一个固定高度，通过 WXSS 设置 height。示例代码：
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view>
-----------------------------
看示例中没有设置固定高度，可以尝试一下