官方文档开头就说，当我们使用竖向滚动时，就需要给它一个固定高度，单位是px。

可滚动视图区域。使用竖向滚动(scroll-y)时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。微信开放文档

编写WXML，项目上将这段作为template：

scroll-y style="width: 100%;height:{{scrollHeight}}px;"

refresher-enabled="{{true}}"

refresher-threshold="{{100}}"

refresher-default-style="white"

refresher-background="lightgreen"

refresher-triggered="{{triggered}}"

bindrefresherpulling="onPulling"

bindrefresherrefresh="onRefresh"

bindrefresherrestore="onRestore"

bindrefresherabort="onAbort"

>

商品描述-手机吧啦吧啦

￥1399.00

这时候我们需要在对应的js中去计算这个 scrollHeight

onLoad: function (options) {

let that = this;

wx.getSystemInfo({

success: function (res) {

// console.info(res.windowHeight);

let height = res.windowHeight;

wx.createSelectorQuery().selectAll('.list_top').boundingClientRect(function (rects) {

rects.forEach(function (rect) {

that.setData({

scrollHeight: height - rect.bottom

});

})

}).exec();

}

});

},

这里的list_top是上面的搜索栏，我们需要减去搜索栏的高度；

现在就已经可以在界面上进行滑动了，添加高度完成。

·扩展一下

scroll-view下拉刷新相关的操作，完整的js文件

data: {

triggered: false,

_freshing: false

},

onLoad: function (options) {

//计算scrollHeight

let that = this;

wx.getSystemInfo({

success: function (res) {

// console.info(res.windowHeight);

let height = res.windowHeight;

wx.createSelectorQuery().selectAll('.list_top').boundingClientRect(function (rects) {

rects.forEach(function (rect) {

that.setData({

scrollHeight: height - rect.bottom

});

})

}).exec();

}

});

},

onReady: function () {

//初始化

setTimeout(() => {

this.setData({

triggered: true,

})

}, 1000)

},

//自定义下拉刷新控件被下拉

onPulling(e) {

console.log('onPulling:', e)

},

//自定义下拉刷新被触发

onRefresh() {

if (this.data._freshing) return

this.setData({

_freshing: true

})

setTimeout(() => {

this.setData({

triggered: false,

_freshing: false

})

}, 3000)

},

//自定义下拉刷新被复位

onRestore(e) {

console.log('onRestore:', e)

},

//自定义下拉刷新被中止

onAbort(e) {

console.log('onAbort', e)

}

示例图：

示例

问题

根据上述代码，下拉实现了，但是不能复位，测试发现 bindrefresherrestore 未执行，也就是 onRestore 方法未实现。

经过测试发现问题出在模板上，需要将data数据通过template标签的data属性传进去：

onRestore

tips：如果你的项目上没有使用template，那么就可以忽略这个问题。