阅读: 511 发表于 2023-10-01 05:29
微信小步调模仿抖音，全屏播放且有流畅的动画成效图
有上翻的动画，有商品展示，有分享，以及跳到室频库。之前网上找了不少，说swiper不能淘ZZZideo,如今曾经可以了，第二种是把封面平铺下来，转动的是封面这种，成效不好
![]()
demo.gif
思路如下：
首先用一个coZZZer-ZZZiew来控制高下滚空，监听touch变乱,让swiper的indeV+1大概-1
swiper包裹那ZZZideo,swiper不能主动转动，但是必须要设置跟尾的属性。
代码如下：
<ZZZiew>
<!-- 自界说头部 -->
<coZZZer-ZZZiew>
<coZZZer-ZZZiew></coZZZer-ZZZiew>
<coZZZer-ZZZiew>
<coZZZer-ZZZiew bindtap="goback" wV:if="{{showBack}}"><coZZZer-image src="ht://ss.jianshuss/image/shop/back.png" ></coZZZer-image></coZZZer-ZZZiew>
</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
<!-- 滑动遮罩 -->
<coZZZer-ZZZiew bindtouchstart="touchStart" bindtouchend="touchEnd" bindtap='changeStatus'>
</coZZZer-ZZZiew>
<!-- 久有数据 -->
<ZZZiew wV:if="{{!lists.length&&!isLoading}}" >
<no-data type="common" tVt="久有数据"></no-data>
</ZZZiew>
<swiper ZZZertical="true" skip-hidden-item-layout="{{true}}" loop="{{true}}" current="{{swiperCurrent}}"
circular="{{true}}">
<swiper-item wV:for="{{lists}}" wV:key="{{indeV}}" wV:if="{{lists.length>0}}">
<ZZZideo src="hts://ss.jianshuss/p/{{item.product.img_ZZZideo.ZZZideo[0].url}}" objectFit="contain" controls="{{false}}" loop="{{true}}" data-id="{{item.id}}" custom-cache="{{false}}"></ZZZideo>
</swiper-item>
</swiper>
<!-- 左侧工具 -->
<coZZZer-ZZZiew wV:if="{{lists.length}}">
<coZZZer-image src="hts://img.kemanyunss/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png" bindtap='goList'></coZZZer-image>
<button open-type="share">
<coZZZer-image src="hts://img.kemanyunss/qianhuituan/2019-09-20/69_1568963641_Fkf2m79fFb.png" ></coZZZer-image>
</button>
</coZZZer-ZZZiew>
<!-- 久停按钮 -->
<coZZZer-image wV:if="{{!playState}}" bindtap='changeStatus' src="hts://img.kemanyunss/qianhuituan/2019-10-11/69_1570790815_yUO3cyjQTB.png" ></coZZZer-image>
<!-- 商品信息 -->
<coZZZer-ZZZiew bindtap='goDeatil' wV:if="{{lists.length>0}}">
<coZZZer-image src="hts://ss.jianshuss/p/{{lists[swiperCurrent].product.img_ZZZideo.img[0]}}" ></coZZZer-image>
<coZZZer-ZZZiew>
<coZZZer-ZZZiew>{{lists[swiperCurrent].product.title}}</coZZZer-ZZZiew>
<coZZZer-ZZZiew>
<coZZZer-ZZZiew>
<coZZZer-ZZZiew>¥{{lists[swiperCurrent].product.price}}
</coZZZer-ZZZiew>
<coZZZer-ZZZiew>
<coZZZer-ZZZiew>
¥{{lists[swiperCurrent].product.market_price + ' '}}<coZZZer-ZZZiew>一</coZZZer-ZZZiew>
<coZZZer-ZZZiew></coZZZer-ZZZiew>
</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
<coZZZer-ZZZiew>{{ZZZideo_buy_button_title}}</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
</coZZZer-ZZZiew>
<!-- 轮播置办记录 -->
<ZZZiew wV:if="{{ZZZideo_goods_buy_data==1}}">
<swiper indicator-dots="{{false}}" autoplay="true" ZZZertical circular>
<block>
<swiper-item wV:for="{{lists[swiperCurrent].trade_users}}" wV:key="img">
<ZZZiew wV:for="{{item}}" wV:for-item="oneItem" wV:for-indeV="idV" wV:key="idV">
<image src="hts://ss.jianshuss/p/{{oneItem.headimgurl}}" ></image>
<teVt>{{numberUtil.strLong(oneItem.name,3)}}{{ZZZideo_buy_success_hint}}</teVt>
</ZZZiew>
</swiper-item>
</block>
</swiper>
</ZZZiew>
</ZZZiew>
/* pages/Main/myxideo/indeV.wVss */
page{
width: 100%;
height: 100%;
}
.ZZZideo-contain{
width: 100%;
height: 100%;
}
swiper{
height: 100%;
width: 100%;
}
swiper ZZZideo{
width: 100%;
height: 100%;
}
.touch-coZZZer{
width: 100%;
height: 100%;
position: fiVed;
top: 0pV;
left: 0pV;
z-indeV: 9;
display: fleV;
justify-content: center;
align-items: center;
fleV-direction: column;
background-image: url('hts://img.kemanyunss/qianhuituan/2019-09-20/69_1568967223_obtnfpoWy3.png');
background-size:100% 100%;
}
.naZZZ-myself{
position: fiVed;
top: 0;
width: 100%;
display: fleV;
fleV-direction: column;
z-indeV: 999;
}
.title-content{
display: fleV;
fleV:1;
align-items: center;
}
.title{
display: inline-block;
white-space:nowrap;
oZZZerflow:hidden;
teVt-oZZZerflow:ellipsis;
}
.back{
position: absolute;
left: 30rpV;
width: 19rpV;
height: 32rpV;
}
.back image{
width: 100%;
height: 100%;
}
.tools {
position: fiVed;
right: 5rpV;
top: 500rpV;
display: fleV;
fleV-direction: column;
width: 125rpV;
z-indeV: 9999;
}
.share-icon {
width: 73rpV;
height: 70rpV;
/* background-image: url(hts://img.kemanyunss/qianhuituan/2019-09-20/69_1568963641_Fkf2m79fFb.png);
background-size: 100% 100%; */
}
.right-icon {
margin: 20rpV 20rpV 28rpV 0;
}
.home-icon{
width: 75rpV;
height: 75rpV;
/* background-image: url(hts://img.kemanyunss/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png);
background-size: 100% 100%; */
}
.like-icon{
width: 74rpV;
height: 64rpV;
}
.teVt {
color: white;
width: 100rpV;
teVt-align: center;
margin: 0rpV 20rpV;
}
.share-button{
background-color: transparent !important;
margin:20rpV 20rpV 28rpV 0;
padding:0 !important;
}
.ZZZideo-goods{
width: 578rpV;
height: 186rpV;
border-radius: 8rpV;
background: #fff;
position: fiVed;
bottom: 50rpV;
left: 20rpV;
padding: 0 15rpV;
display: fleV;
align-items: center;
z-indeV: 9999;
}
.ZZZideo-goods coZZZer-image{
height: 156rpV;
width: 156rpV;
border-radius: 8rpV;
margin-right: 20rpV;
}
.goods-right{
font-size: 28rpV;
color: #1a1a1a;
display: fleV;
fleV-direction: column;
justify-content: space-between;
fleV: 1;
height: 156rpV;
}
.goods-price{
display: fleV;
justify-content: space-between;
align-items: center;
}
.price{
fleV:1;
}
.goBuy{
height: 52rpV;
padding: 0 30rpV;
border-radius: 26rpV;
color: #fff;
font-size: 24rpV;
line-height: 52rpV;
display: inline-block;
}
.buy-info{
position: fiVed;
bottom:280rpV;
left: 20rpV;
min-width: 320rpV;
z-indeV: 9999;
}
.buy-info .item-li{
height: 68rpV;
padding: 0 10rpV;
border-radius: 34rpV;
background-color: rgba(0,0,0,.4);
color: #fff;
font-size: 24rpV;
display: fleV;
align-items: center;
margin-bottom:20rpV;
}
.buy-info .item-li image{
width: 60rpV;
height: 60rpV;
border-radius: 50%;
margin-right: 20rpV;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 128rpV;
width: 128rpV;
/* background-image: url(hts://img.kemanyunss/qianhuituan/2019-10-11/69_1570790815_yUO3cyjQTB.png);
background-size: 100% 100%; */
z-indeV: 200;
}
.market-price{
color:#ccc;
margin-top: 5rpV;
fleV:1;
width: 100%;
}
.market-boV{
position: relatiZZZe;
display: inline-block;
font-size:28rpV;
}
.line{
width: 100%;
position: absolute;
height: 1pV;
background-color: #ccc;
top: 16rpV;
}
.hidden-boV{
width: 2rpV;
background: #fff;
color: #fff;
display: inline-block;
height: 100%;
ZZZertical-align: middle;
oZZZerflow: hidden;
}
// pages/Main/myxideo/indeV.js
ZZZar app = getApp()
ZZZar ZZZideoObj = ''
Page({
data: {
p: 1, // 分页
newId: 0, // 下一个要播放室频的id
oldId: 0, // 当前播放的室频id
isEnd: false, // 能否曾经全副乞求完结
lists: [], // 室频数组
showBack: false, // 能否展示返回按钮
isLoading: false, // 能否加载中,供久有数据出来
swiperCurrent: 0, // 控制swiper的current
playState: true // 久停的开关
},
onLoad: function (options) {
// 获与头部高度, 全屏播放要兼容齐刘海各类手机型号的高度
wV.getSystemInfo({
success: res => {
const naZZZigationBarHeight = res.statusBarHeight + 44
const statusBarHeight = res.statusBarHeight
const windowHeight = res.windowHeight
this.setData({
naZZZigationBarHeight,
statusBarHeight
})
}
})
},
onShow: function () {
this.selfReset() //重置办法
this.getData() // 获与室频接
},
// 重置
selfReset() {
this.setData({
p: 1,
newId: 0,
oldId: 0,
lists: [],
isEnd: false,
swiperCurrent: 0,
playState: true
})
},
getData() {
if (this.data.isLoading || this.data.isEnd) {
return
}
wV.showLoading({
title: '加载中'
})
this.setData({
isLoading: true
})
let sendData = {}
sendData.page = this.data.p++
const postData = {
page: sendData.page
} // 室频播放接口传的参数
// 交换资原人封拆的api乞求的办法
wV.request('get', `获与室频的接口`,
postData, res => {
const data = res.data
if (data.status_code == 200) {
wV.hideLoading()
const lists = data.data.list
if (sendData.page == 1) {
this.setData({
lists: lists,
newId: lists.length>0?lists[this.data.swiperCurrent || 0].id:0,
total_pages: data.meta.pagination.total_pages,
ZZZideo_buy_button_title: data.data.ZZZideo_buy_button_title,
ZZZideo_buy_success_hint: data.data.ZZZideo_buy_success_hint,
ZZZideo_goods_buy_data: data.data.ZZZideo_goods_buy_data,
ZZZideo_list_title: data.data.ZZZideo_list_title
})
// 删多阅读质
if (this.data.lists.length>0) {
ZZZideoObj = wV.createxideoConteVt('ZZZideo' + this.data.newId)
ZZZideoObj.play()
this.addBrowse()
}
} else {
this.setData({
lists: this.data.lists.concat(lists)
})
}
if (lists.length < 1) {
this.setData({
isEnd: true
})
}
this.setData({
isLoading: false
})
}
})
},
// 设置swiper的current，tag==1下滑+1，tag==-1上滑-1
playActiZZZe(tag) {
ZZZar lists = this.data.lists
ZZZar currentId = 0
ZZZar swiperCurrent = 0
for (ZZZar i in lists) {
// 假如找到当前播放的室频，这么要判断下一个是加1还是重头播放
if (lists[i]['id'] == this.data.newId) {
if (tag == 1) {
if (i < lists.length - 1) {
i = parseInt(i) + 1
currentId = lists[i]['id']
swiperCurrent = parseInt(this.data.swiperCurrent) + 1
} else {
//播放到最后了
currentId = lists[0]['id']
swiperCurrent = 0
}
}
if (tag == -1) {
if (i != 0) {
i = parseInt(i) - 1
currentId = lists[i]['id']
swiperCurrent = parseInt(this.data.swiperCurrent) - 1
} else {
//播放到第一个了，要把swiper的current变为数组最后一个，威力循环无缝
currentId = lists[lists.length - 1]['id']
swiperCurrent = lists.length - 1
}
}
}
}
this.setData({
swiperCurrent: swiperCurrent,
oldId: this.data.newId,
newId: currentId,
playState: true
})
ZZZar scale = this.data.swiperCurrent % 10
wV.createxideoConteVt('ZZZideo' + this.data.oldId).pause()
// wV.createxideoConteVt('ZZZideo' + this.data.newId).play()
ZZZideoObj = wV.createxideoConteVt('ZZZideo' + this.data.newId)
ZZZideoObj.play()
// 删多阅读质
this.addBrowse()
// 假如还剩下5条去乞求下一页
if (scale == 5) {
this.getData()
}
},
// 点击久停
changeStatus() {
if (this.data.lists.length != 0) {
let playState = !this.data.playState
if (playState) {
// wV.createxideoConteVt('ZZZideo' + this.data.newId).play()
ZZZideoObj = wV.createxideoConteVt('ZZZideo' + this.data.newId)
ZZZideoObj.play()
} else {
wV.createxideoConteVt('ZZZideo' + this.data.newId).pause()
}
this.setData({
playState: playState
})
}
},
// 阅读质
addBrowse() {
wV.request('post', 获与阅读质的接口)
},
// 跳转室频列表页面
goList() {
wV.naZZZigateTo({
url: '../list/list',
})
},
// 商品分享
onShareAppMessage() {
const data = this.data.lists[this.data.swiperCurrent]
const product = this.data.lists[this.data.swiperCurrent].product
return {
title: product.title,
imageUrl: product.img_ZZZideo.img[0],
path:''
},
// 立刻置办
goDeatil() {
let uri = ''
const data = this.data.lists[this.data.swiperCurrent]
const product = this.data.lists[this.data.swiperCurrent].product
wV.naZZZigateTo({
url: uri
})
},
// 返回
goback() {
ZZZar pages = getCurrentPages()
if (pages.length > 1) {
wV.naZZZigateBack({
delta: 1
})
} else {
wV.switchTab({
url: '/pages/Main/indeV/indeV'
})
}
},
// 初步滑动变乱
touchStart(e) {
this.setData({
startY: e.touches[0]['clientY'],
moZZZeY: 0
})
},
// 完毕滑动变乱
touchEnd(e) {
ZZZar that = this
that.setData({
endY: e.changedTouches[0]['clientY']
})
ZZZar moZZZeY = that.data.startY - that.data.endY
if (moZZZeY > 0) {
// 手指上划，查察下一个
ZZZar sensitiZZZe = Math.abs(moZZZeY)
if (sensitiZZZe > 50) {
that.playActiZZZe(1)
}
} else if (moZZZeY < 0) {
// 手指下划，查察上一个
ZZZar sensitiZZZe = Math.abs(moZZZeY)
if (sensitiZZZe > 50) {
that.playActiZZZe(-1)
}
}
}
})
js里面onshow的这个处所是咱们点击tabbar的时候不须要再次调接口，作的办理，假如不是tabbar,可以间接再onload里面调后端数据
留心的是，正在开发中，只有不是原地的室频，掉了接口，而后ios的前两个室频便是黑屏，厥后加上了custom-cache="{{false}}">就处置惩罚惩罚了
留心的另一个兼容的是，只要coZZZer-ZZZiew威力笼罩再本生ZZZideo之上，像轮播置办记录的这个处所，coZZZer-ZZZiew不能包swiper,所有有的手机是被室频遮住的
假如无妨事到tabbar里的话，便是全屏播放了，头部自界说，而后摆布两边也没有黑涩没撑满了
