⼀.官⽅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="{{ate_time != ''}}">{{item.times}}</view>
<!-- 头像与内容⽂本 -->
<view class="body" >
<view class="avatar-container">
<image class="avatar" v:if="" src="{{item.head_img_url}}" />
</view>
<!-- 画三⾓箭头 -->
<view class="triangle" wx:if="{{item.msg_type != 'image'}}" ></view>
<view class="content" >
<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://hm8: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 = uches[0].pageX
var currentY = uches[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 = uches[0].pageX
this.data.lastY = uches[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) {
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]
})
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: 'ztmp.jjyg8/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 () {
发布评论