微信小程序 ios自定义导航栏下拉“橡皮筋” 效果

问题：

1.微信小程序ios中如果自定义导航栏取消了橡皮筋效果页面无法滑动

2.如果不取消，页面往下拉时会与顶部有一大片空白（安卓本身scrollTop不会有负值）

3.fixed之后absolute，页面移动时候会有fixed抖动现象如下图

<!--下拉刷新-->
<view style="position:fixed; top:{{statusBarHeight + NavHeigth}}px;z-index: -99;"><view style="height: {{scroll_pulldownY}}px;width: 100vw; text-align:center;border:1px solid gray;"><text class="pulldown"style="height: {{scroll_pulldownY}}px;line-height: {{scroll_pulldownY}}px;background-color: blue;">{{refresh}}</text></view>
</view>

解决办法：

外面多加一层fixed固定有移动距离scroll_pulldownY

fixed是相对父元素定位的

<!--下拉刷新-->
<view style="position:fixed; top:{{statusBarHeight + NavHeight - 5}}px;z-index: -50;"><view style="position:fixed; top:{{statusBarHeight + NavHeigth}}px;z-index: -99;"><view style="height: {{scroll_pulldownY}}px;width: 100vw; text-align:center;border:1px solid gray;"><text class="pulldown"style="height: {{scroll_pulldownY}}px;line-height: {{scroll_pulldownY}}px;background-color: blue;">{{refresh}}</text></view></view>
</view>

列表的top也要添加一个移动距离view_pulldownY

<!--列表-->
<view id="scroll_ttt" style="top:{{statusBarHeight + NavHeight + 10 + view_pulldownY}}px;position: relative;height: auto;" class="test"bindtouchstart="st" bindtouchend="en" bindtouchmove="mo"><view class="scroll" wx:for="{{list_note}}" wx:key="_id" data-index="{{index}}"><view class="v1-"><view class="v2"><text>{{item.task_num}}</text></view></view></view>
</view>

效果如下图

JS文件设置移动距离：

Page页面中要用watch来监控滚动条的scrollTop距离

    onPageScroll(ev) {this.watch.look_scroll(ev.scrollTop, this)},watch: {look_scroll(ev, obj) {if (flag == false) {flag = true //记录第一下flag_num = ev //第一下的位置if (flag_num >= 0) {//滚动条往下走 不会导致下拉加载//下拉加载滚动条是往上走的flag = false //恢复flag_num = 0return;}} //else {flag_num = ev//flag为真的时候代表滚动条往上走了 第一下的位置是负数if (ev == 0) {//最终回弹了flag = false //重设flag_num = 0}}},scroll_start() {//console.log("start")},scroll_move() {//console.log("move")},scroll_end() {//console.log("end")}},

1.st函数记录触摸开始的位置

    st(e) {if (flag_num < 0) {this.setData({starty: flag_num})}},

2.en函数记录触摸结束的位置并计算changeY（与开始位置的相隔距离）

注意：

changeY要取反（越往下拉scrollY越接近负无穷）

    en(e) {//ios设置这个this.watch.scroll_end()var changeY = -(flag_num - this.data.starty)if (changeY >= this.data.scroll_set) {this.setData({refresh: "正在刷新……",scroll_pulldownY: this.data.scroll_set,view_pulldownY: this.data.scroll_set})//延迟2svar that = thissetTimeout(function() {that.onPullDownRefresh()that.setData({refresh: "下拉刷新",scroll_pulldownY: 0,view_pulldownY: 0})}, 2000)} //else {this.setData({refresh: "下拉刷新",scroll_pulldownY: 0,view_pulldownY: 0})}},

3.mo函数计算移动过程中不断变化的相隔距离

注意：

1.如果changeY大于0 则代表往上拉了这个changeY就没有意义了

往上拉的时候onPageScroll得到的值是为正的

因为只有flag_num小于0（滚动条在最顶部往下拉的时候才为负值）才设置starty

2.页面与顶部会有间隔的空白滚动组件与页面也会有同样的间隔距离

所以scroll_pulldownY要为两倍

而组件只与页面有间隔距离只为1倍

    mo(e) {//ios this.watch.scroll_move()var changeY = -(flag_num - this.data.starty)if (changeY < 0) {changeY = 0} //else if (changeY <= this.data.scroll_set) {this.setData({refresh: "下拉刷新"})} //else if (changeY > this.data.scroll_set) {this.setData({refresh: "松手试试刷新"})}this.setData({scroll_pulldownY: changeY * 2, //ios的要两倍view_pulldownY: changeY})},