微信小程序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%;

}

/*按住說話button*/

.voice-button {

  height: 36px;

  color: #818181;

  font-size: 14px;

  line-height: 36px;

}

/*懸浮提示框*/

.hud-container {

  position: fixed;

  width: 150px;

  height: 150px;

  left: 50%;

  top: 50%;

  margin-left: -75px;

  margin-top: -75px;

}

/*背景層*/

.hud-background {

  position: absolute;

  width: 100%;

  height: 100%;

  background: #999;

  opacity: .8;

  z-index: 11;

  border-radius: 10px;

}

/*懸浮框主體*/

.hud-body {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 19;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

}

/*圖標*/

.hud-body image {

  margin-top: 20px;

  width: 80px;

  height: 80px;

}

/*文字*/

.hud-body .tip {

  color: #fff;

  text-align: center;

  width: 90%;

  line-height: 34px;

  margin: 0 auto;

  margin-bottom: 10px;

  width: 90%;

}

.hud-body .warning {

  background: #cc3333;

  border-radius: 5px;

}

::-webkit-scrollbar{/*隱藏滾動條*/

width: 0;

height: 0;

color: transparent;

}

 

js：

// chat.js

// var app = getApp();

var user_id = user_id

var sender_id = sender_id

var socketOpen = false;

var frameBuffer_Data, session, SocketTask;

var url = 'ws://www.yzhm8.com:8080';

import Toast from "../../utils/toast";

let chatInput = require('../../modules/chat-input/chat-input');

let utils = require('../../utils/util');

/**

* 聊天輸入組件展現頁面

*/

Page({

/**

* 頁面的初始數據

*/

data: {

lastX: 0, //滑動開始x軸位置

lastY: 0, //滑動開始y軸位置

text: "沒有滑動",

currentGesture: 0, //標識手勢

textMessage: '',

allContentList: [],

chatItems: [],

scroll_height: wx.getSystemInfoSync().windowHeight - 54,

page_index: 0,

mode: true,

cancel: false,

status: 0,

toView: '',

msg: '',

receiver_ids: '',

sender_ids: '',

scrollTopTX: 'a4',//滾動位置

dropDown:true,//切換滾動與刷新

dropDown_id:false//只容許刷新一次

},

//滑動移動事件

handletouchmove: function (event) {

var currentX = event.touches[0].pageX

var currentY = event.touches[0].pageY

var tx = currentX - this.data.lastX

var ty = currentY - this.data.lastY

var text = ""

//左右方向滑動

if (Math.abs(tx) > Math.abs(ty)) {

if (tx < 0)

text = "向左滑動"

else if (tx > 0)

text = "向右滑動"

}

//上下方向滑動

else {

if (ty < 0)

text = "向上滑動"

else if (ty > 0)

text = "向下滑動"

}

//將當前座標進行保存以進行下一次計算

this.data.lastX = currentX

this.data.lastY = currentY

this.setData({

text: text,

});

},

//滑動開始事件

handletouchtart: function (event) {

this.data.lastX = event.touches[0].pageX

this.data.lastY = event.touches[0].pageY

},

//滑動結束事件

handletouchend: function (event) {

this.data.currentGesture = 0;

this.setData({

text: "沒有滑動",

});

},

Refresh: function () {

var arr = res.data;

for (var i = 0; i < arr.length; i++) {

console.log(arr[i].content)

arr[i].content = i

}

this.Refresh()

},

/**

* 生命週期函數--監聽頁面加載

*/

onLoad(options) {

var that = this;

var read_id = options.user_id

var read_id = options.user_id;

if (options.user_id == undefined) {

wx.redirectTo({

url: '/pages/Login/login',

})

return;

}

console.log(195, options)

that.setData({

// avatar:options.avatar_url,/*改 llp*/

// sender_id: sender_id,

user_id: wx.getStorageSync('user_id'),

avatar_url: wx.getStorageSync('avatar'),

receiver_ids: read_id.split(",")[0],

sender_ids: read_id.split(",")[1]

})

wx.getStorage({///////////////////////////////////////取//////////////////////////////////////

key: 'key01',

success(res) {

console.log(207, res)

var arr = [];

for (var i = 0; i < res.data.length; i++) {

var myself = '';

if (res.data[i].sender_id == that.data.user_id) {

myself = 1;

} else {

myself = 0;

}

var itile = {

myself: myself,

head_img_url: that.data.avatar_url,

msg: res.data[i].content,

msg_type: 'text',

myid: res.data[i].receiver_id,

uid: res.data[i].sender_id,

}

arr.push(itile)

}

console.log('arr', arr)

that.setData({

allContentList: arr,

dropDown: false,

})

setTimeout(function () {/*改 llp*/

console.log('1111111111111111', arr.length)

that.setData({

scrollTopTX: 'row' + arr.length

})

}, 100)

},

})

// wx.request({

// url: 'https://ztmp.jjyg8.com/api/InstantMessaging/query_chat',

// data:{

// sender_id:sender_id,

// receiver_id:user_id,

// type:2

// },

// success: function (Tenarticle) {

// console.log(Tenarticle,"Tenarticle")

// wx.setStorage({

// key: 'Tenarticle',

// data: Tenarticle.data

// })

// }

// })

this.initData();

// wx.getStorage({

// key: 'Tenarticle',

// success(Tenarticle) {

// for(var t=0;t<Tenarticle.data.length;t++){

// that.data.allContentList.unshift({

// msg: Tenarticle.data[t].content,

// uid: Tenarticle.data[t].sender_id,

// myid: Tenarticle.data[t].receiver_id,

// states: Tenarticle.data[t].states,

// times:Tenarticle.data[t].times,

// msg_type:"text",

// head_img_url: that.data.avatar_url&&that.data.avatar,

// myself:1&&0

// })

// }

// }

// })

},

// 頁面加載完成

onReady: function () {

var that = this;

var that_data = that.data

var user_id = user_id

SocketTask.onOpen(res => {

socketOpen = true;

console.log('監聽 WebSocket 鏈接打開事件。', res)

})

SocketTask.onClose(onClose => {

console.log('監聽 WebSocket 鏈接關閉事件。', onClose)

// socketOpen = false;

this.webSocket()

})

SocketTask.onError(onError => {

console.log('監聽 WebSocket 錯誤。錯誤信息', onError)

socketOpen = false

})

wx.onSocketMessage(onMessage => {

console.log('監聽WebSocket接受到服務器的消息事件。服務器返回的消息', onMessage)

var onMessage_data = onMessage.data

var s = onMessage_data.substr(0, 1)

var onMessage_s = onMessage_data.substr(2)

if (s == 0) {

wx.request({

url: 'https://ztmp.jjyg8.com/api/InstantMessaging/bind',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

data: {

uid: that.data.user_id,

client_id: onMessage_s

},

method: "POST",

})

} else {

that.data.allContentList.push({

myself: 0,

head_img_url: that.data.avatar,

msg_type: 'text',

msg: this.data.onMessage.content,

myid: that_data.user_id,

uid: that_data.sender_ids,/*改 llp*/

});

that.setData({

allContentList: that.data.allContentList,

dropDown: false,

})

setTimeout(function () {/*改 llp*/

console.log('1111111111111111')

that.setData({

scrollTopTX: 'row' + that.data.allContentList.length

})

}, 100)

that.scrollToBottom();

console.log(that.data.allContentList)

}

// if (onMessage_data.cmd == 1) {

// that.setData({

// link_list: text

// })

// console.log(text, text instanceof Array)

// if (text instanceof Array) {

// for (var i = 0; i < text.length; i++) {

// text[i]

// }

// } else {

// }

// }

})

},

onShow: function (e) {

if (!socketOpen) {

this.webSocket()

}

},

webSocket: function () {

// 建立Socket

SocketTask = wx.connectSocket({

url: url,

data: 'data',

header: {

'content-type': 'application/json'

},

method: 'post',

success: function (res) {

console.log('WebSocket鏈接建立', res)

},

fail: function (err) {

wx.showToast({

title: '網絡異常！',

})

console.log(err)

},

})

},

initData() {

let that = this;

let systemInfo = wx.getSystemInfoSync();

chatInput.init(this, {

systemInfo: systemInfo,

minVoiceTime: 1,

maxVoiceTime: 60,

startTimeDown: 56,

format: 'mp3', //aac/mp3

sendButtonBgColor: 'mediumseagreen',

sendButtonTextColor: 'white',

extraArr: [{

picName: 'choose_picture',

description: '照片'

}, {

picName: 'take_photos',

description: '拍攝'

}],

// tabbarHeigth: 48

});

that.setData({

pageHeight: systemInfo.windowHeight,

});

wx.setNavigationBarTitle({

title: '好友'

});

that.textButton();

that.extraButton();

// that.voiceButton();

},

textButton() {

var that = this;

var that_data = that.data

console.log(that)

console.log(that_data)

//console.log(user_id)

chatInput.setTextMessageListener(function (e) {

let msg = e.detail.value;

if (msg == '') {

wx.showToast({

title: '總要寫點什麼吧'

});

return;

}

var message = {

myself: 1,

head_img_url: that.data.avatar_url,

msg_type: 'text',

msg: msg,

myid: that_data.user_id,

uid: that_data.sender_id,

}

console.log(that.data)

if (socketOpen) {

that.data.allContentList.push(message);

that.setData({

dropDown: false,

})

setTimeout(function () {/*改 llp*/

console.log('1111111111111111')

that.setData({

scrollTopTX: 'row' + that.data.allContentList.length

})

}, 100)

sendSocketMessage(

wx.request({

url: 'https://ztmp.jjyg8.com/api/InstantMessaging/send',

data: {

uid: message.uid,

sendname: 10101,

img: '11111',

content: msg,

sendid: message.myid

},

success: function (res) {

console.log(res.data)

that.setData({

items: res.data

})

},

}),

// msg: msg,

// // myid: 100,

// uid: 100,

)

if (that.row == 1) {

wx.request({

url: 'https://ztmp.jjyg8.com/api/InstantMessaging/Message_warehousing',

data: {

receiver_id: message.uid,

sender_id: message.myid,

content: message.msg,

states: 2,

}

})

}

// wx.sendSocketMessage({

// data: message,

// })

that.setData({

allContentList: that.data.allContentList,

dropDown: false,

msg: '' // 清空輸入框文本

})

setTimeout(function () {/*改 llp*/

console.log('1111111111111111')

that.setData({

scrollTopTX: 'row' + that.data.allContentList.length

})

}, 100)

that.scrollToBottom();

}

})

},

extraButton() {

let that = this;

chatInput.clickExtraListener(function (e) {

console.log(e);

let itemIndex = parseInt(e.currentTarget.dataset.index);

// if (itemIndex === 2) {

// that.myFun();

// return;

// }

wx.chooseImage({

count: 1, // 默認9

sizeType: ['compressed'],

sourceType: itemIndex === 0 ? ['album'] : ['camera'],

success: function (res) {

let tempFilePath = res.tempFilePaths[0];

wx.uploadFile({

url: 'https://oss.jjyg8.com',

filePath: tempFilePaths[0],

name: 'file',

formData: {

name: tempFilePaths[0],

key: "img/${filename}",

policy: "eyJleHBpcmF0aW9uIjoiMjAyMC0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==",

OSSAccessKeyId: "LTAIn3MQVumdpEws",

success_action_status: "200",

signature: "6NqEga8RuDFjBox9jMfCel1GjZE=",

},

success: function (res) {

console.log(res)

that.setData({

img: tempFilePaths[0].replace("http://tmp", "https://oss.jjyg8.com/img")

})

},

fail: function ({ errMsg }) {

console.log('upladImage fail, errMsg is: ', errMsg)

wx.showToast({

title: "上傳失敗",

duration: 1000

})

},

})

var message =

{

myself: 1,

head_img_url: that.data.avatar_url,

msg_type: 'image',

msg: tempFilePath,

myid: that.data.user_id,/*改 llp*/

uid: that.data.sender_ids,

create_time: utils.formatTime(new Date())

}

that.data.allContentList.push(message);

that.setData({

'inputObj.extraObj.chatInputShowExtra': false

});

sendSocketMessage(message)

that.setData({

allContentList: that.data.allContentList,

dropDown: false,

msg: '' // 清空輸入框文本

})

setTimeout(function () {/*改 llp*/

console.log('1111111111111111')

that.setData({

scrollTopTX: 'row' + that.data.allContentList.length

})

}, 100)

that.scrollToBottom();

}

});

});

chatInput.setExtraButtonClickListener(function (dismiss) {

console.log('Extra彈窗是否消失', dismiss);

})

},

resetInputStatus() {

chatInput.closeExtraView();

},

scrollToBottom: function () {

this.setData({

toView: 'row_' + (this.data.allContentList.length - 1)

});

console.log(this.data)

},

// // 下拉刷新

onPullDownRefresh: function () {

console.log(488,'下拉')

// // 顯示頂部刷新圖標

wx.showNavigationBarLoading();

var that = this;

if (!that.data.dropDown_id){

wx.request({

url: 'https://ztmp.jjyg8.com/api/InstantMessaging/query_chat',

data: {

receiver_id: that.data.sender_ids,/*改 llp*/

sender_id: that.data.user_id,

type: 3

},

success: function (browsed) {

var arr = [];

var myself = ';'

for (var i = 0; i < browsed.data.length; i++) {

if (browsed.data[i].sender_id == that.data.user_id) {

myself = 1

} else {

myself = 0

}

var itile = {

myself: myself,

head_img_url: that.data.avatar_url,

msg: browsed.data[i].content,

msg_type: 'text',

myid: browsed.data[i].receiver_id,

uid: browsed.data[i].sender_id,

}

arr.push(itile)

}

for (var i = 0; i < that.data.allContentList.length; i++) {

arr.push(that.data.allContentList[i])

}

that.setData({

allContentList: arr,

dropDown_id:true,/*改 llp*/

dropDown: false,

})

// setTimeout(function () {/*改 llp*/

// console.log('1111111111111111')

// that.setData({

// scrollTopTX: 'row' + arr.length

// })

// }, 100)

// 隱藏導航欄加載框

wx.hideNavigationBarLoading();

// 中止下拉動做

wx.stopPullDownRefresh();

}

})

}else{

this.setData({

dropDown: false,

})

// 隱藏導航欄加載框

wx.hideNavigationBarLoading();

// 中止下拉動做

wx.stopPullDownRefresh();

wx.showToast({

title: '已查詢全部記錄',

icon: 'success',

duration: 2000

})

}

},

upper(){//滾動到頂部

console.log('滾動到頂部')

this.setData({

dropDown: true,

})

},

lower(){//滾動到底部

console.log('1212312312313')

this.setData({

scrollTopTX: 'row' + this.data.allContentList.length

})

},

downTouchmove(){

this.setData({

dropDown: false,

})

}

});

//經過 WebSocket 鏈接發送數據，須要先 wx.connectSocket，並在 wx.onSocketOpen 回調以後才能發送。

function sendSocketMessage(msg) {

var that = this;

SocketTask.send({

data: JSON.stringify(msg)

}, function (res) {

console.log('已發送', res)

})

}