微信小程序scroll-view（滚动组件）与onPullDownRefresh（下拉刷新）

一.官方api描述  在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

 查阅大量资料以后发现一共有三种方式：

1.使用view代替scroll-view，从而触发onPullDownRefresh

2.在scroll-view标签上新建一个隐藏的view标签，使用scroll-view标签中bindscrolltoupper（滚动到顶部/左边，会触发事件）显示view标签，做动画模拟上拉刷新

3.scroll-view标签下添加一个view标签能与onPullDownRefresh结合使用（我猜用的这种）

二.方法代码如下：
wxml：

<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" scroll-with-animation="true" scroll-into-view="{ {scrollTopTX}}" class = "ball" ><!---改 llp----->

<view class='{ {dropDown?"list":""}}' >

<view style='width:100%;height:100%' bindtouchmove='{ {dropDown?"downTouchmove":""}}'>

  <!-- 每一行 -->

  <view class="row" wx:for="{ {allContentList}}" wx:key="key" id="row{ {index+1}}">

    <!-- 日期 -->

    <view class="datetime" wx:if="{ {item.create_time != ''}}">{ {item.times}}</view>

    <!-- 头像与内容文本 -->

    <view class="body" style="flex-flow: { {item.myself == 0 ? 'row' : 'row-reverse'}}">

      <view class="avatar-container">

        <image class="avatar" v:if="" src="{ {item.head_img_url}}" />

      </view>

 

      <!-- 画三角箭头 -->

      <view class="triangle" wx:if="{ {item.msg_type != 'image'}}" style="{ {item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view>

      <view class="content" style="{ {item.myself == 1 ? 'background: #7ECB4B' : ''}};{ {item.msg_type == 'image' ? 'background: none' : ''}}">

        <image class="picture" wx:if="{ {item.msg_type == 'image'}}" src="{ {item.msg}}" mode="widthFix" bindtap="preview" data-src="{ {item.msg}}" />

        <view wx:else="{ {item.msg_type == 'text'}}">{ {item.msg}}</view>

      </view>

    </view>

  </view>

</view>

</view>

</scroll-view>

wxss：

@import "../../modules/chat-input/chat-input.wxss";

/** 聊天窗口样式

* 54px为回复框高度，js同

*/

page{

height: 100%;

}

/*加载*/

.list {

overflow:auto;

margin:auto;

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

}

/*聊天记录*/

.ball{

width : 100%;

height: 92%;

margin-bottom: 100rpx;

white-space:nowrap;

}

/*单元行*/

.row {

display: flex;

flex-direction: column;

margin: 0 30rpx;

}

/*日期*/

.datetime {

  font-size: 10px;

  padding: 10px 0;

  color: #999;

  text-align: center;

}

/*主体*/

.body {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  justify-content: flex-start;

  width: 100%;

  margin-top: 10px;

}

/*头像容器*/

.body.avatar-container {

  width: 20%;

}

/*头像*/

.body .avatar {

  width: 80rpx;

  height: 80rpx;

background:#fff;

  border-radius: 50%;

  margin: 0 20rpx;

}

/*文本消息*/

.body .content {

  font-size: 30rpx;

  background: #fff;

  border-radius: 20rpx;

  padding:0 24rpx;

  line-height: 80rpx;

  margin-bottom: 10px;

}

/* 三角箭头 */

.body .triangle {

  background: white;

  width: 20rpx;

  height: 20rpx;

  margin-top: 26rpx;

  transform: rotate(45deg);

  position: absolute;

}

/*图片消息*/

.picture {

  width: 160px;

}

/*回复框*/

.reply {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

  position: fixed;

  bottom: 0;

  width: 100%;

  height: 54px;

  border-top: 1px solid rgb(215, 215, 215);

  background: rgb(245, 245, 245);

}

.reply .voice-image {

  width: 25px;

  height: 25px;

  margin-left: 3%;

}

/*文本输入或语音录入*/

.reply .opration-area {

  flex: 1;

  padding: 8px;

}

/*回复文本框*/

.reply input {

  background: rgb(252, 252, 252);

  height: 36px;

  border: 1px solid rgb(221, 221, 221);

  border-radius: 6px;

  padding-left: 3px;

}

/*选取图片*/

.reply .choose-image {

  width: 25px;

  height: 25px;

  margin-right: 3