一.官方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)
})
}