公司小程序要做个仿抖音上下切换视频的效果，一开始想用swiper,有资料说多了会卡。原因是video标签太多的原因，查看资料有只是用一个video标签的，滑动时切换src即可
全部代码
<template>
<view class="content"
:style="{height:pinggao+'px'}"
@touchmove="handletouchmove"
@touchstart="handletouchstart"
@touchend="handletouchend" >
<!-- <hx-navbar backgroundColorLinearDeg="-90"
:background-color="[255, 255, 255,0.1]"
:leftSlot='true' :fixed="true"
class="nav"
:rightSlot="true">
</hx-navbar> -->
<!-- 下拉刷新 -->
<view class="shuaxin" :class="shuaxin ? 'wrap-animation' : ''"
:style="{transform:'translateY('+ (shua)+'px)'}">
下拉刷新
</view>
<!-- 视频列表 -->
<view class="box" :class="isMove ? 'wrap-animation' : ''"
@click.stop="zanting"
:style="{transform:'translateY('+ (cunnent * -pinggao + jianju)+'px)'}">
<!-- :poster="video_list[cunnent].video_src+'?x-oss-process=video/snapshot,t_1000,m_fast'" -->
<video id="vide"
:autoplay="true"
:controls="false"
:show-fullscreen-btn="false"
:show-play-btn="false"
:show-center-play-btn="false"
:enable-progress-gesture="false"
:class="isMove ? 'wrap-animation' : ''"
@play="play"
@pause="pause"
@ended="ended"
@error="error"
@loadedmetadata="loadedmetadata"
:style="{height:pinggao+'px',top:cunnent * pinggao+'px','z-index':videOp ? 5 : 1}"
:src="video_list[cunnent].video_src"></video>
<view v-for="i,index in video_list" :key="index"
:style="{height:pinggao+'px'}" class="vide_box">
<image :src="i.video_src+'?x-oss-process=video/snapshot,t_1000,m_fast'"
style="width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);z-index: 1;"
mode="widthFix"></image>
<view v-if="zan" class="iconfont icon-zanting"></view>
<view class="anniu" @click.stop="''">
<view>点赞</view>
<view @click="dakai">评论</view>
<view>转发</view>
</view>
</view>
</view>
<!-- 评论 -->
<view class="zhezhao"
v-show="zhezhao"
@click="pingzhe"
@touchmove.stop.prevent="''">
<view class="zhe_box" @click.stop="''">
<scroll-view :scroll-y="true"
@scrolltolower="chudi"
:scroll-top="scroTop"
@scroll="scHua"
:style="{height:$liuhai() ? (pinggao * 0.6 + 20)+ 'px' : (pinggao * 0.6) + 'px'}"
class="huadong">
<view id="scros" style="padding-bottom: 30rpx;"
:style="{'margin-top':dingHe > 0 ? -dingHe + 'px' : '0px'}">
<view class="p_top_zhan">
<view class="flex_between p_top">
<view class="flex p_t_le">
<view @click="pingzhe" class="iconfont icon-guanbi"></view>
<!-- <text>评论4.1万</text> -->
</view>
<!-- <view class="zan">
10万 赞 | 48 转发
</view> -->
</view>
</view>
<view class="ping_list">
<view v-for="(item,index) in rateList" :key="index" class="ping_box">
<view class="flex_between" style="margin-bottom: 20rpx;">
<view class="ping_le flex" style="align-items: flex-start;">
<image :src="item.user.url" style="width: 60rpx;height: 60rpx;border-radius: 50%;margin-right: 4rpx;"></image>
<view class="toubu">
<view>
{{item.user.merchantname}}
</view>
</view>
</view>
</view>
<view class="contents">
<view class="con">
<view class="neir">
{{item.content}}
</view>
<view class="flex" style="font-size: 22rpx; color: #999;margin-top: 10rpx;">
{{item.createtime}}
<!-- huifu111(item.id + '',item.user.merchantname + '') -->
<view @tap.stop="huifu111" :data-id="item.id" :data-name="item.user.merchantname"
style="margin-left: 20rpx; padding: 0 30rpx;">回复{{index}}</view>
</view>
</view>
<!-- 树形数据的评论 -->
<view class="shu_box" :class="!item.shou ? '' : 'shu_box_a1'">
<view class="con" v-for="itema,indexa in item.replys" :key='indexa' style="margin-top: 20rpx;">
<view class="flex_between" >
<view class="ping_le flex" style="align-items: flex-start;">
<image :src="itema.user.url" style="width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 4rpx;"></image>
<view class="toubu toubushu">
{{itema.user.merchantname}}
</view>
<view style="font-size: 18rpx;color: #AAA4A4;line-height: 40rpx;height: 60rpx;">
<text class="iconfont icon-sanjiao"></text>
{{itema.replyUser.merchantname}}
</view>
</view>
</view>
<view style="margin-left: 44rpx;">
<view class="neir">
{{itema.content}}
</view>
<view class="flex" style="font-size: 22rpx; color: #999;margin-top: 10rpx;">
{{itema.createtime}}
<view @click.stop="huifu111(itema.id + '',itema.user.merchantname + '')" style="margin-left: 20rpx; padding: 0 30rpx;">回复</view>
</view>
</view>
</view>
</view>
<view style="font-size: 26rpx;color: #AAA4A4;margin-left: 50rpx;margin-top: 10rpx;"
@click="readMore(item.id + '',index)" v-if="(item.replys_num > 0 && !item.notData) || item.shou">
查看回复</view>
<view style="font-size: 26rpx;color: #AAA4A4;margin-left: 50rpx;margin-top: 10rpx;"
@click="shouqi(index)" v-if="(item.replys_num > 0 && item.notData && !item.shou)">
没有更多了</view>
</view>
</view>
</view>
</view>
<!-- 暂无数据 -->
<view v-if="rateList.length <= 0"
style="background-color: #FFFFFF;height: calc(100% - 130rpx)">
<zanwu :tishi="tishi1"></zanwu>
</view>
<!-- 顶起距离 -->
<view :style="{height:dingHe+'px'}"></view>
</scroll-view>
<view @click="showJian" :style="{'padding-bottom':$liuhai() ? '20px' : '0px'}" class="shuru flex">
<view class="flex">
<image src="http://49.234.212.93/media/write.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
<input type="text" confirm-type="send"
:placeholder="placeholder"
:disabled="true"
:cursor-spacing="50"
v-model="rateContent" :adjust-position="true"/>
</view>
</view>
</view>
</view>
<!-- 输入键盘 -->
<view class="jianpan" @click.stop="guanjian"
:style="{bottom:jian ? '0px' : '-1000px'}" @touchmove.stop.prevent="''">
<view :style="{bottom:jian ? jianpanHe+'px' : '0px'}"
class="shuru shuru1 flex">
<view class="flex">
<image src="http://49.234.212.93/media/write.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
<input type="text"
confirm-type="send"
:placeholder="placeholder"
@confirm="rates"
@blur="guanjian"
:adjust-position="false"
:focus="jian"
:cursor-spacing="50"
v-model="rateContent"/>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
video_list:[
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/9dfda090ec1f9b4cbc11cda2c821f3f2.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/06c69de25fad582e8d4c9486fbffa004.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/16c12704d5f3376931c18432083b1fcc.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/5adf5e729919b7d804d6ddf95acfc7d2.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/d021f23c3163dd2abe2b530efb5902ff.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/da39ad428660fd92681b1e2c0121c06c.mp4'},
{video_src:'https://oss.xunwenkeji.com/java/www/videos/20211118/efbfff943428a89682c6b39593c8756e.mp4'},
// {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
// {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
// {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
],
pagesY:'', // 触摸起始高度坐标
animation:'', // 视频划动动画
cunnent:0,//记录是在video列表的索引位置
hemove:0,// 记录是几个手指触摸屏幕的时候 0就一个
song:false,//手指离开屏幕变true
pinggao:uni.getSystemInfoSync().windowHeight,//屏幕和video高度
jianju:0,//手指滑动的距离
jianjucopy:0,//多指触摸时记录滑动的距离
isMove:false,//手指离开屏幕时触发动画的开关
duozhi:false,//触摸屏幕时是多指还是单指
duozhis:false,//滑动屏幕时是多指还是单指
startTime:'',//手指触摸屏幕时的时间
maxSpeed:0.7,//手指滑动的速度毫秒
topBo:1,//到顶或到底所能滑动的距离
touchNum:0,//点击屏幕的时间，判断是不是双击
videId:'',//video的实例化对象
zan:false,//暂停图标的显示
videOp:false,//控制video 的src切换时是否加载完成的变量
chuList:[],//触摸屏幕时多根手指的坐标
chumove:false,//多根手指滑动时的变量
transY:null,//动画倒计时
jilumove:0,
// 评论
zhezhao:false,//控制评论的显示隐藏
scroTop:0,//控制scroll-view 的滑动距离
scroTopCopy:0,//记录scroll-view 的滑动距离
rateList:[
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
},
{
content: "XC90 YYDS",
createtime: "2021-12-17 09:42:42",
id: 214,
user: {
merchantname: "从前从前",
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg"
},
url: "https://oss.xunwenkeji.com/java/www/images/20211209/opic/20211209/b82dc89c623c622a03e692d97f368ea6.jpg/202112091812521639044772.jpg",
}
],
placeholder:'说点好听的~',//默认input框显示的提示文字
bili:0,//rpx 和px的转化比例
dingHe:0,//控制scroll-view 下的盛放评论数据的大盒子的margin-top，和点击最底部的评论把盒子给个高度使margin-top能其作用
// 键盘高度
jianpanHe:271,//键盘高度
rateContent:'',//input value值
jian:false,//控制input框的显示隐藏
// 下拉刷新
shua:-100,
shuaCopy:-100,
shuaxin:false,
}
},
// watch:{
// cunnent(){
// }
// },
onLoad() {
},
onReady() {
this.videId = uni.createVideoContext('vide');
this.bili = uni.getSystemInfoSync().windowWidth / 750;
this.shua = this.bili * -120;
this.shuaCopy = this.bili * -120;
},
// 添加了"disableScroll":true, 手机无法使用触底
onReachBottom() {
},
methods: {
// 手指触屏
handletouchstart(e){
this.pagesY = e.touches[e.touches.length - 1].pageY;
this.chuList = e.touches;
this.startTime = Date.now();
if(e.touches.length > 1){
this.duozhi = true;
this.jianjucopy = this.jianju;
}else{
this.duozhi = false;
this.jianjucopy = 0;
}
},
handletouchmove(e){
// this.$throttle(()=>{
let pageY = e.touches[e.touches.length - 1].clientY;
// 判断在滑动过程中是单指还是多指
if(e.touches.length > 1){
this.duozhis = true;
this.chumove = true;
}else{
this.duozhis = false;
}
// 多根手指触摸
if(this.duozhi){
let box_he = -this.pinggao * (this.video_list.length - 1) - this.topBo;
if(this.jianju < 0){
this.lunxunY(pageY);
// 向下划
// 到底了
if(this.cunnent == this.video_list.length - 1){
this.jianju = this.jianjucopy + (pageY - this.pagesY) < -this.topBo ? -this.topBo : this.jianjucopy + (pageY - this.pagesY);
}else{
let huajian = this.cunnent * -this.pinggao + (this.jianjucopy + (pageY - this.pagesY));
if(box_he > huajian ){
this.jianju = (this.video_list.length - 1 - this.cunnent) * -this.pinggao - this.topBo;
}else{
this.jianju = this.jianjucopy + (pageY - this.pagesY);
}
}
}else{
this.lunxunY(pageY);
// 向上划
// 到顶了
let juli = this.cunnent * this.pinggao + this.topBo;
if(this.cunnent == 0 && this.jianju > 0){
this.jianju = this.jianjucopy + (pageY - this.pagesY) > this.topBo ? this.topBo : this.jianjucopy + (pageY - this.pagesY);
}else{
// if(this.jianju > 0 ){
this.jianju = this.jianjucopy + (pageY - this.pagesY) > juli ? juli : this.jianjucopy + (pageY - this.pagesY);
// }else{
// this.jianju = 0;
// }
}
}
}else{
if(this.isMove){
this.isMove = false;
clearTimeout(this.transY)
}
// 单根手指触摸
if(this.jianju < 0 ){
// 向下划
// 到底了
if(this.cunnent == this.video_list.length - 1){
this.jianju = pageY - this.pagesY < -this.topBo ? -this.topBo : pageY - this.pagesY;
}else{
this.jianju = pageY - this.pagesY;
}
// if(this.cunnent == 0){
// this.shua = this.shua + this.jianju * 0.5 >= 0 ? 0 : this.shua + this.jianju * 0.5;
// console.log(this.shua,'新东方的风格')
// }
}else{
// 向上滑
// 到顶了
if(this.cunnent == 0 && this.jianju > 0){
this.jianju = pageY - this.pagesY > this.topBo ? this.topBo : pageY - this.pagesY;
// 触发下拉刷新
let xishu = 0.03;
if(this.jilumove >= (pageY - this.pagesY)){
// 向上滑
this.shua = this.shua - (pageY - this.pagesY) * xishu >= 0 ? 0 : this.shua - (pageY - this.pagesY) * xishu;
}else{
//向下划
this.shua = this.shua + (pageY - this.pagesY) * xishu >= 0 ? 0 : this.shua + (pageY - this.pagesY) * xishu;
}
}else{
this.jianju = pageY - this.pagesY;
}
}
this.jilumove = pageY - this.pagesY;
}
// },20)
},
lunxunY(pageY){
// 多指往下滑时安卓手机上会把最近一次的触摸坐标给放到手指触屏事件里，得手动把和当前移动的坐标相吻合的坐标筛选出来
// this.chumove 多址滑动时触发，只在多指滑动时触发一次
// !this.duozhis 多指触摸离开只剩一个手指时触摸的坐标会改变
if(!this.duozhis && this.chumove){
for (let i in this.chuList) {
let gg = this.chuList[i].pageY - pageY;
this.chuList[i].gg = Math.abs(gg);
}
let index = 0;
let _min = this.chuList[index].gg;
for (let k in this.chuList) {
if(this.chuList[k].gg < _min){ //如果其他元素大于我们假设的值，证明我们假设的值不是最小的
_min = this.chuList[k].gg; //重置_min的值
index = k;
}
}
this.pagesY = this.chuList[index].pageY;
this.chumove = false;
}
},
// 手指离开屏幕
handletouchend(e){
// 如果是滑动过程中多根手指触摸那么就不运行手指离开事件
// if(this.duozhis){
// return
// }
if(e.touches.length > 0){
return
}
let jian = this.pinggao / 4;
if (this.isMove || this.jianju == 0){
this.jianjucopy = 0;
this.guanbi()
return
}
// 计算滑动速度
const speed = Math.abs((e.changedTouches[0].pageY - this.pagesY) / (Date.now() - this.startTime));
// 手指触摸屏幕多根手指
if(this.duozhi){
// 多根手指触摸滑动换算成页数
let yeshu = Math.floor(Math.abs(this.jianju) / this.pinggao);
let shengxia = Math.abs(this.jianju) - yeshu * this.pinggao;
if (shengxia > jian || yeshu > 0 ) {
this.jianjucopy = 0;
if(this.jianju < 0 ){
// 向下划
this.huadong(0,yeshu)
}else{
this.huadong(1,yeshu)
}
}else{
this.guanbi()
}
}else{
// 手指触摸屏幕单根手指
// 判断移动距离和滑动速度是否达到界限 如果达到界限
if (Math.abs(this.jianju) > jian || speed > this.maxSpeed) {
this.jianjucopy = 0;
if(this.jianju < 0 ){
// 向下划
this.huadong(0)
}else{
this.huadong(1)
}
}else{
this.guanbi()
}
}
// 触发刷新
if(this.shua >= 0){
this.zhendong();
}else{
this.shuadong();
}
},
huadong(type,yeshu){
// 多指滑动
if(yeshu > 0){
if(type == 0){
this.cunnent = this.cunnent + yeshu >= this.video_list.length - 1 ? this.video_list.length - 1 : this.cunnent + yeshu
if(this.video_list.length - 1 > this.cunnent){
this.cunnent++;
}else{
this.cunnent = this.video_list.length - 1;
this.$msg('到底了!')
}
}else if(type == 1){
this.cunnent = this.cunnent - yeshu >= 0 ? this.cunnent - yeshu : 0
if(this.cunnent > 0){
this.cunnent--;
}else{
this.$msg('到顶了!')
}
}
}else{
if(type == 0){
if(this.video_list.length - 1 > this.cunnent){
this.cunnent++;
}else{
this.$msg('到底了!')
}
}else if(type == 1){
if(this.cunnent > 0){
this.cunnent--;
}else{
this.$msg('到顶了!')
}
}
}
if(type == 0 || type == 1){
this.videOp = false;
this.zan = false;//暂停按钮显示隐藏
}
this.guanbi()
},
guanbi(){
this.isMove = true;
this.jianju = 0;
this.duozhi = false;
this.transY = setTimeout(() => {
// 关闭切换动画 切换数据
this.isMove = false;
// 判断获取推荐视频列表信息
// 切换视频等操作
}, 1000)
},
zanting(e){
this.touchNum ++;
setTimeout(()=>{
if(this.touchNum == 1){
if(this.zan){
this.videId.play();
}else{
this.videId.pause();
}
}
if(this.touchNum >= 2){
this.$msg('双击点赞')
}
this.touchNum = 0
},250)
},
// 播放
play(){
this.zan = false;
},
// 暂停
pause(){
this.zan = true;
},
ended(){
this.zan = true;
},
// 播放出错
error(){
this.video_list.splice(this.cunnent,1)
this.$msg('播放失败')
},
// video 加载完成时触发
loadedmetadata(){
if(!this.videOp){
if(this.$aIos() == 1){
setTimeout(()=>{
this.videOp = true;
},200)
}else{
this.videOp = true;
}
}
},
// 刷新动画
zhendong(){
let that = this;
uni.vibrateLong({
success: function () {
console.log('success');
that.shuadong();
}
});
},
shuadong(){
this.shua = this.shuaCopy;
this.shuaxin = true;
setTimeout(() => {
this.shuaxin = false;
}, 600)
},
// 评论js
// 评论的遮罩层
pingzhe(){
this.zhezhao = false;
},
// 点击评论显示
dakai(){
this.zhezhao = true;
// this.jisuan();
},
// scroll-view 触底加载事件
chudi(){
// if(!this.notData){
// this.page++;
// this.getRateList()
// }
},
// 监听软键盘弹起事件
jiantingJian(){
return new Promise((reslove, reject) => {
let that = this;
uni.onKeyboardHeightChange(res => {
if(res.height > 0){
that.jianpanHe = res.height;
reslove(that.jianpanHe);
}
})
})
},
// 点击评论底部弹起软键盘
async showJian(){
this.jian = true;
this.jianpanHe = this.jianpanHe > 0 ? this.jianpanHe : await this.jiantingJian();//手机软键盘的高度
},
// 点击评论的回复按钮
async huifu111(e){
this.jian = true;
let id = e.currentTarget.dataset.id;//这条评论的id
let name = e.currentTarget.dataset.name;//这条评论的name
let juY = Math.floor(this.pinggao - e.detail.y - 24*this.bili);//这条评论距屏幕底部的距离
this.jianpanHe = this.jianpanHe > 0 ? this.jianpanHe : await this.jiantingJian();//手机软键盘的高度
let jianpan = this.jianpanHe + this.bili * 110;//手机软键盘的高度 + input框的高度
if(juY < jianpan){
let huagao = jianpan - juY;
this.dingHe = huagao;
}
},
//点击软键盘的评论
rates(){
// this.$Debounce(()=>{
// },500)
this.guanjian();
},
// 关闭评论遮罩
guanjian(){
this.jian = false;
this.dingHe = 0;
this.scroTop = this.scroTopCopy;
},
// scroll-view 滚动事件
scHua(e){
this.scroTopCopy = e.detail.scrollTop;
},
// scstart(){},
// scmove(){},
// scend(){},
}
}
</script>
<style>
.content {
background-color: #000000;
height: 100%;
overflow: hidden;
}
.wrap-animation{
transition: transform .6s;
}
.box > view{
position: relative;
}
page{
height: 100%;
overflow: hidden;
}
.nav{
position: fixed;
z-index: 10;
}
/deep/.hx-navbar__content.hx-navbar--fixed{
background-color: rgba(0,0,0,0) !important;
}
#vide{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 1;
}
.anniu{
position: absolute;
right: 20rpx;
z-index: 20;
top: 50%;
transform: translateY(-50%);
}
.anniu > view{
padding: 20rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
margin-top: 20rpx;
}
.vide_box{
display: flex;
align-items: center;
}
.icon-zanting{
position: absolute;
z-index: 20;
font-size: 100rpx;
color:rgba(255,255,255,0.8);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 评论 */
.zhezhao{
position: fixed;
z-index: 20;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.zhe_box{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.huadong{
/* height: 800rpx; */
width: calc(100% - 48rpx);
padding: 0 24rpx;
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
#scros{
transition: margin-top .3s;
}
.p_top{
height: 100rpx;
width: 100%;
/* position: fixed;
z-index: 1; */
background-color: #FFFFFF;
}
.p_top_zhan{
margin-bottom: 30rpx;
height: 100rpx;
overflow: hidden;
border-bottom: 2rpx solid #F5F6F7;
position: sticky;
top: 0;
}
.p_t_le{
font-size: 32rpx;
font-weight: bold;
}
.icon-guanbi{
margin-right: 20rpx;
font-size: 36rpx;
}
.zan{
font-size: 26rpx;
color: #AEAEAE;
}
.ping_le{
width: calc(100% - 100rpx);
}
.contents{
width: calc(100% - 64rpx);
margin-left: 64rpx;
}
.toubu{
height: 60rpx;
}
.toubu view{
line-height: 60rpx;
color: #AAA4A4;
font-size: 22rpx;
}
.toubushu{
line-height: 40rpx;
color: #AAA4A4;
font-size: 18rpx;
}
.con{
/* margin-left: 64rpx; */
}
.neir{
font-size: 28rpx;
margin-right: 100rpx;
}
.shuru{
width: 100%;
left: 0;
height: 110rpx;
background-color: #FFFFFF;
transition: all 0.6s;
border-top: 2rpx solid #EEEEEE;
}
.shuru > view{
width: calc(100% - 24rpx * 4);
margin: 0 24rpx;
padding: 0 24rpx;
height: 76rpx;
border-radius: 100px;
background-color: #F2F6F7;
}
.shuru > view input{
width:calc(100% - 100rpx);
margin-left: 10rpx;
line-height: 50rpx;
}
.icon-sanjiao{
display: inline-block;
transform:rotate(270deg);
margin: 0 10rpx;
font-size: 20rpx;
}
.shu_box{
height: auto;
transition: all 0.3s;
overflow: hidden;
}
.shu_box_a1{
height: 0px;
}
/* `````````````````````````````````````````*/
/*
键盘
*/
.jianpan{
position: fixed;
z-index: 21;
width: 100%;
height: 100%;
/* top: 0; */
left: 0;
background-color: rgba(0,0,0,0.2);
transition: all 0.1s;
overflow: hidden;
}
.shuru1{
position: absolute;
width: 100%;
left: 0;
width: 100%;
}
/*
刷新
*/
.shuaxin{
background-color: #FFFFFF;
text-align: center;
line-height: 120rpx;
font-size: 40rpx;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 6;
}
</style>
在苹果xs机型上还是会有滚动条，能够滑动，下拉橡皮筋效果也还有，只能在pages.json里加上"disableScroll":true,属性
这只是个dome，还有很多不完善的，使用时根据自己的情况在删改吧
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
