<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>
-----------------------------
看示例中没有设置固定高度,可以尝试一下