收藏
回答

Scroll-view 卡顿

问题模块
API和组件

公司名称

国石网

MP帐号(邮箱)

cuiqg@foxmail.com

开发者微信号

Qianggang_Tsui

机型(如iPhone 6s plus)

所有

操作系统(如iOS 9.3)


是否必现

出现时间


操作路径(即如何操作可以复现该问题)


问题描述(具体问题介绍)

使用scroll-view 下拉事件 会重复调用也就是拉一次会执行多次,内容还会发生抖动

问题截图(客户端问题界面截图)


代码片段截图

page.JS

var app = getApp();
 
Page({
  data:{
    page: 1,
    scrollTop: 0,
    hasMore: true,
    specials: [],
    error: null
  },
  onLoad:function(options){
        this.getSpecial()
        console.log(1);
  },
  scrollLower: function() {
        this.getSpecial()
        console.log(2);
  },
  scroll: function(e) {
        let sTop = e.detail.scrollTop;
        this.setData({
            scrollTop: sTop
        });
  },
  onPullDownRefresh: function() {
      this.setData({
          page: 1,
            scrollTop: 0,
            hasMore: true,
            specials: [],
      })
      this.getSpecial()
      wx.stopPullDownRefresh()
  },
  onShareAppMessage: () => {
        return {
          title: 'hello',
          desc: 'nihao',
          path: '/pages/product/index'
        }
  },
  getSpecial: function() {
        let page = this.data.page
        let rows = this.data.specials
        if(page == 0) {
            return
        }
        app.common.request('product/discount',{ page: page, size: 20},(ret) => {
            if(ret.err_no == 0) {
 
                for(var in ret.results.rows) {
 
                    rows.push(ret.results.rows[x]);
                }
 
               let nextPage = (ret.results.next == page ? 0 : ret.results.next);
 
               this.setData({
                  page: nextPage,
                  hasMore: (nextPage == 0 ? false true),
                  specials: rows
               });
 
            else {
 
                this.setData({
                    error: ret.err_msg
                })
            }
        })
    },
})


page.wxml

<import src="../../common/template/template.wxml"/>
 
<block wx:if="{{ specials && !error }}">
<view class="page-product">
<scroll-view class="product-list" scroll-y="true" enable-back-to-top="true" bindscrolltolower="scrollLower" bindscroll="scroll" scroll-top="{{ scrollTop }}">
<template is="product-list" data="{{ products: specials }}"/>
 
<template is="loading" data="{{ hasMore: hasMore }}"/>
</scroll-view>
</view>
</block>
 
<block wx:else>
 
<template is="error" data="{{ errMsg: error }}"/>
</block>

page.json

{
    "navigationBarTitleText": "捡漏集市",
    "enablePullDownRefresh": false
}

template.wxml

<template name="product-list">
<view class="list-item" wx:for="{{ products }}" wx:for-item="item" wx:key="{{ item.id }}">
    <navigator url="/pages/product/detail?id={{ item.id }}" open-type="navigate">
    <image class="list-item__image" src="{{ item.thumb }}" mode="aspectFill"></image>
    <view class="list-item__desc">
        <text class="list-item__title">{{ item.name }}</text>
        <text class="list-item__cate">{{ item.category }}</text>
        <text class="list-item__price">{{ item.price == 0 ? '议价' : ' ¥ ' + ( item.price_discount == 0 ? item.price : item.price_discount ) }}</text>
    </view>
    </navigator>
</view>
</template>
 
 
<template name="loading">
<view class="loading">
<block wx:if="{{ hasMore }}">
    <view class="loading-image">
        <text>拼命加载中...</text>
    </view>
</block>
<block wx:else>
    <view class="loading-text">
        <text>我是底线</text>
    </view>
</block>
</view>
</template>
 
<template name="error">
<view class="error">
<icon type="warn" size="120" color="#ccc"></icon>
<text>{{ errMsg }}</text>
</view>
 
</template>


最后一次编辑于  2017-07-18
回答关注问题邀请回答
收藏

1 个回答

  • 晨
    2017-07-19

    bindscrolltolower 会在页面滚到lower-threshold定义对区域范围内时触发,是会有触发多次对情况,是正常的。你可以通过减少lower-threshold来控制阈值,或者自行对多次请求进行以下处理。

    2017-07-19
    赞同
    回复