收藏
回答

为什么这里的scroll-view绑定不到事件？？？

问题模块
API和组件
<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;
}


最后一次编辑于  2017-11-26  （未经腾讯允许，不得转载）
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • Special
    Special
    官
    2017-11-26

    使用竖向滚动时，需要给<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>

    -----------------------------


    看示例中没有设置固定高度，可以尝试一下

    2017-11-26
    赞同
    回复
相关问题