镜子功能发现功能
This commit is contained in:
161
pages/found2/index.js
Normal file
161
pages/found2/index.js
Normal file
@@ -0,0 +1,161 @@
|
||||
Page({
|
||||
data: {
|
||||
page : 1,
|
||||
has_more: true,
|
||||
lists : [],
|
||||
listsIndex : 0,
|
||||
share_id : '',
|
||||
loading : true,
|
||||
swipers : [],
|
||||
playId : '',
|
||||
},
|
||||
|
||||
onLoad(e){
|
||||
this.setData({
|
||||
share_id : e.share_id || ''
|
||||
})
|
||||
getApp().globalData.inviteText = e.invite || ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
onShow(){
|
||||
|
||||
},
|
||||
|
||||
onHide(){
|
||||
if(this.data.share_id){
|
||||
this.setData({
|
||||
share_id:''
|
||||
})
|
||||
}
|
||||
},
|
||||
swiperChange(e){
|
||||
let { current } = e.detail
|
||||
|
||||
console.log(current)
|
||||
let swipers = this.data.swipers
|
||||
let item = swipers[current]
|
||||
let type = item.type
|
||||
if(item.type == 'video'){
|
||||
|
||||
if(current == 0 || this.data.playId == '' || this.data.playId != item.id){
|
||||
let id = 'myVideo'+item.id
|
||||
console.log(id)
|
||||
let videoContext = wx.createVideoContext(`${id}`)
|
||||
videoContext.play()
|
||||
this.setData({
|
||||
playId:item.id
|
||||
})
|
||||
}
|
||||
// if()
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
getList(){
|
||||
let params = {
|
||||
page:this.data.page,
|
||||
share_id:this.data.share_id
|
||||
}
|
||||
wx.$api.found.foundIndex(params).then(res => {
|
||||
let lists = this.data.lists
|
||||
if(this.data.page == 1){lists = []}
|
||||
lists = this.data.lists.concat(res.data.data)
|
||||
if(this.data.swipers.length == 0){
|
||||
this.setData({
|
||||
swipers:res.data.data.splice(0,3)
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
lists : lists,
|
||||
has_more: res.data.page.has_more,
|
||||
})
|
||||
|
||||
this.setData({
|
||||
loading:false
|
||||
})
|
||||
setTimeout(()=>{
|
||||
wx.hideLoading()
|
||||
wx.stopPullDownRefresh()
|
||||
},3000)
|
||||
}).catch(err=>{
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon :'none',
|
||||
mask :true,
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.setData({
|
||||
loading:false
|
||||
})
|
||||
},3000)
|
||||
})
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
this.setData({
|
||||
page:1,
|
||||
has_more:true,
|
||||
lists:[],
|
||||
loading:true
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
onReachBottom(){
|
||||
if(this.data.has_more){
|
||||
this.setData({
|
||||
page:this.data.page +1
|
||||
})
|
||||
this.getList()
|
||||
wx.showLoading({
|
||||
title: '疯狂加载中..',
|
||||
})
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: '没有更多',
|
||||
icon:'none',
|
||||
mask:true,
|
||||
duration:2000
|
||||
})
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
preImg(e){
|
||||
let current = e.currentTarget.dataset.idx
|
||||
console.log(current)
|
||||
let urls = e.currentTarget.dataset.urls
|
||||
wx.previewImage({
|
||||
urls,
|
||||
current:urls[current]
|
||||
})
|
||||
},
|
||||
// 收藏
|
||||
doSubscribeFavorite(e){
|
||||
let index= e.currentTarget.dataset.index
|
||||
let type = e.currentTarget.dataset.type
|
||||
let item = this.data.lists[index]
|
||||
let lists = this.data.lists
|
||||
wx.$api.found.foundSubscribeFavorite(item.id,type).then(res => {
|
||||
lists[index].is[`${type}`] = res.data.res
|
||||
lists[index].count[`${type}`] = res.data.count
|
||||
this.setData({
|
||||
lists:lists
|
||||
})
|
||||
}).catch(err=>{
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon :'none',
|
||||
mask :true,
|
||||
duration:2000
|
||||
})
|
||||
})
|
||||
},
|
||||
onShareAppMessage(e){
|
||||
let {describe,id,share_cover}= e.target.dataset.obj
|
||||
return {
|
||||
title : describe,
|
||||
imageUrl: share_cover,
|
||||
path : "/pages/found/index?share_id=" + id + '&invite=' + wx.getStorageSync("invite")
|
||||
}
|
||||
},
|
||||
})
|
||||
9
pages/found2/index.json
Normal file
9
pages/found2/index.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "发现",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#5283ea",
|
||||
"backgroundTextStyle": "dark",
|
||||
"backgroundColor": "#eeeeee",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
54
pages/found2/index.wxml
Normal file
54
pages/found2/index.wxml
Normal file
@@ -0,0 +1,54 @@
|
||||
<view class="pack-center pages-hint grey" wx:if="{{loading}}">
|
||||
<image src="/static/icons/loadingGif.gif"></image>
|
||||
<view>疯狂加载中</view>
|
||||
</view>
|
||||
|
||||
|
||||
<block wx:else>
|
||||
<!-- <view class="found" wx:for="{{lists}}" wx:key="id"> -->
|
||||
<!-- 用户 -->
|
||||
<!-- <view class="avatar">
|
||||
<view class="avatar-left">
|
||||
<image class="cover" src="{{item.user.avatar ? item.user.avatar: '/static/imgs/userHead.png'}}" mode="aspectFill"/>
|
||||
<view>{{item.user.name || '未知用户'}}</view>
|
||||
</view>
|
||||
<view>{{item.created_at}}</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 文字描述-->
|
||||
<!-- <view class="des">{{item.describe}}</view> -->
|
||||
|
||||
<!-- 主图或视频 -->
|
||||
<view class="cont">
|
||||
<swiper class="cont-swiper" bindchange='swiperChange' vertical='{{true}}'>
|
||||
<swiper-item class="cont-swiper-item" wx:for="{{swipers}}" wx:key="item">
|
||||
<!-- 图片汇总 -->
|
||||
<block wx:if="{{item.type == 'pictures'}}">
|
||||
<swiper class="cont-image-swiper" indicator-dots="{{true}}" interval='{{1500}}' indicator-active-color="rgba(255,255,255,0.8)" indicator-color='rgba(255,255,255,0.3)'>
|
||||
<swiper-item class="cont-image-swiper-item" wx:for="{{item.pictures}}" wx:key='idx' wx:for-index="idx" wx:for-item="it">
|
||||
<image catch:tap="preImg" data-idx="{{idx}}" data-urls='{{item.pictures}}' wx:key="it" src="{{it}}" mode="widthFix"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
<!-- 视频汇总 -->
|
||||
<block wx:else>
|
||||
<video class="cont-video" loop="true" enable-progress-gesture="true" object-fit="contain" id="myVideo{{item.id}}" src="{{item.video}}" />
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 点赞 收藏 分享 -->
|
||||
<!-- <view class="footer">
|
||||
<view class="footer-item" catch:tap="doSubscribeFavorite" data-type='favorite' data-index='{{index}}'>
|
||||
<image src="{{!item.is.favorite?'/static/imgs/icon_un_zan@2x.png':'/static/imgs/icon_zaned@2x.png'}}" mode="widthFix" />{{!item.is.favorite?'点赞':item.count.favorite}}
|
||||
</view>
|
||||
<view class="footer-item" catch:tap="doSubscribeFavorite" data-type='subscribe' data-index='{{index}}'>
|
||||
<image src="{{!item.is.subscribe?'/static/imgs/icon_un_shou@2x.png':'/static/imgs/icon_shoued@2x.png'}}" mode="widthFix" />{{!item.is.subscribe?'收藏':item.count.subscribe}}
|
||||
</view>
|
||||
<button class="footer-item" open-type="share" hover-class="none" data-obj='{{item}}'>
|
||||
<image style="width:28rpx;" src="/static/imgs/icon_share@2x.png" mode="widthFix" />分享
|
||||
</button>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
</block>
|
||||
122
pages/found2/index.wxss
Normal file
122
pages/found2/index.wxss
Normal file
@@ -0,0 +1,122 @@
|
||||
page {
|
||||
background-color: #f9f9f9;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
.found{
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.avatar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.avatar-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content:flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
}
|
||||
.avatar-left .cover{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 30rpx;
|
||||
border: solid 10rpx rgba(224, 222, 222, 0.1);
|
||||
}
|
||||
|
||||
.des{
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
padding: 0 30rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.cont{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.cont-swiper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cont-swiper-item{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cont-image-swiper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
.cont-image-swiper-item{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cont-image-swiper-item image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cont-video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer{
|
||||
border-top: solid 1rpx #eee;
|
||||
font-size: 28rpx!important;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400!important;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.footer-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 20rpx;
|
||||
flex: 1;
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.footer-item image{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.footer button{
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.footer button:after {
|
||||
border: none;
|
||||
}
|
||||
199
pages/found2/index2.js
Normal file
199
pages/found2/index2.js
Normal file
@@ -0,0 +1,199 @@
|
||||
// pages/found2/index2.js
|
||||
|
||||
var startY, endY
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
page : 1,
|
||||
has_more: true,
|
||||
lists : [],
|
||||
share_id: '',
|
||||
currentIndex : 0,
|
||||
safeArea : getApp().globalData.safeArea,
|
||||
playing : false
|
||||
},
|
||||
|
||||
onLoad(e){
|
||||
this.setData({
|
||||
share_id : e.share_id || ''
|
||||
})
|
||||
getApp().globalData.inviteText = e.invite || ''
|
||||
this.getList()
|
||||
this.videoContext = wx.createVideoContext('found-cont-video')
|
||||
},
|
||||
|
||||
onHide(){
|
||||
if(this.data.share_id){
|
||||
this.setData({
|
||||
share_id:''
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getList(){
|
||||
let params = {
|
||||
page:this.data.page,
|
||||
share_id:this.data.share_id
|
||||
}
|
||||
wx.$api.found.foundIndex(params).then(res => {
|
||||
let lists = this.data.lists
|
||||
if(this.data.page == 1){lists = []}
|
||||
lists = this.data.lists.concat(res.data.data)
|
||||
|
||||
this.setData({
|
||||
lists : lists,
|
||||
has_more: res.data.page.has_more,
|
||||
})
|
||||
if(this.data.currentIndex == 0){
|
||||
this.onVideoPlay()
|
||||
}
|
||||
}).catch(err=>{
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon :'none',
|
||||
mask :true,
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.setData({
|
||||
loading:false
|
||||
})
|
||||
},3000)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
onTouchStart(e) {
|
||||
let { clientY } = e.changedTouches[0]
|
||||
startY = clientY
|
||||
},
|
||||
|
||||
onTouchEnd(e) {
|
||||
let { clientY } = e.changedTouches[0]
|
||||
endY = clientY
|
||||
let clientXY = startY - clientY
|
||||
console.log(clientXY)
|
||||
if(clientXY>60){
|
||||
this.onIsDirection('next')
|
||||
}else if(clientXY < -60){
|
||||
this.onIsDirection('prev')
|
||||
}
|
||||
},
|
||||
|
||||
onIsDirection(type){
|
||||
let {currentIndex,lists} = this.data
|
||||
if(type == 'next'){
|
||||
console.log('获取下一个')
|
||||
if(currentIndex!=lists.length-1){
|
||||
currentIndex ++
|
||||
this.setData({
|
||||
currentIndex:currentIndex
|
||||
})
|
||||
this.onVideoPlay()
|
||||
}else{
|
||||
if(this.data.has_more){
|
||||
this.setData({
|
||||
page:this.data.page+1
|
||||
})
|
||||
this.getList()
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: '没有更多了~',
|
||||
icon:'none',
|
||||
mask:true
|
||||
})
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
if(type == 'prev'){
|
||||
if(currentIndex>0){
|
||||
currentIndex --
|
||||
this.setData({
|
||||
currentIndex:currentIndex
|
||||
})
|
||||
this.onVideoPlay()
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: '没有更多了~',
|
||||
icon:'none',
|
||||
mask:true
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
onVideoPlay(){
|
||||
if(this.data.lists[this.data.currentIndex].type == 'video'){
|
||||
setTimeout(() => {
|
||||
this.videoContext.seek(0)
|
||||
this.videoContext.play()
|
||||
this.setData({
|
||||
playing:true
|
||||
})
|
||||
}, 200);
|
||||
}else{
|
||||
this.videoContext.pause()
|
||||
this.videoContext.seek(0)
|
||||
this.setData({
|
||||
playing:false
|
||||
})
|
||||
}
|
||||
},
|
||||
onVideoPause(){
|
||||
if(this.data.playing){
|
||||
this.videoContext.pause()
|
||||
this.setData({
|
||||
playing:false
|
||||
})
|
||||
}else{
|
||||
this.videoContext.play()
|
||||
this.setData({
|
||||
playing:true
|
||||
})
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
preImg(e){
|
||||
let current = e.currentTarget.dataset.idx
|
||||
console.log(current)
|
||||
let urls = e.currentTarget.dataset.urls
|
||||
wx.previewImage({
|
||||
urls,
|
||||
current:urls[current]
|
||||
})
|
||||
},
|
||||
// 收藏
|
||||
doSubscribeFavorite(e){
|
||||
let index= e.currentTarget.dataset.index
|
||||
let type = e.currentTarget.dataset.type
|
||||
let item = this.data.lists[index]
|
||||
let lists = this.data.lists
|
||||
wx.$api.found.foundSubscribeFavorite(item.id,type).then(res => {
|
||||
lists[index].is[`${type}`] = res.data.res
|
||||
lists[index].count[`${type}`] = res.data.count
|
||||
this.setData({
|
||||
lists:lists
|
||||
})
|
||||
}).catch(err=>{
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon :'none',
|
||||
mask :true,
|
||||
duration:2000
|
||||
})
|
||||
})
|
||||
},
|
||||
onShareAppMessage(e){
|
||||
let {describe,id,share_cover}= e.target.dataset.obj
|
||||
return {
|
||||
title : describe,
|
||||
imageUrl: share_cover,
|
||||
path : "/pages/found/index?share_id=" + id + '&invite=' + wx.getStorageSync("invite")
|
||||
}
|
||||
},
|
||||
})
|
||||
4
pages/found2/index2.json
Normal file
4
pages/found2/index2.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
46
pages/found2/index2.wxml
Normal file
46
pages/found2/index2.wxml
Normal file
@@ -0,0 +1,46 @@
|
||||
<view class="found" bind:touchend="onTouchEnd" bind:touchstart="onTouchStart" capture-bind:touchforcechange="onTouchForChange">
|
||||
<view class="found-cont">
|
||||
<video
|
||||
catch:tap="onVideoPause"
|
||||
wx:if="{{lists[currentIndex].type=='video'}}"
|
||||
id="found-cont-video"
|
||||
src="{{lists[currentIndex].video}}"
|
||||
loop="{{true}}"
|
||||
controls="{{false}}"
|
||||
show-center-play-btn="{{true}}"
|
||||
enable-play-gesture="{{true}}"
|
||||
/>
|
||||
<block wx:if="{{lists[currentIndex].type=='pictures'}}">
|
||||
<swiper class="swiper" bindchange="nextVideo" indicator-dots="{{true}}" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#fff">
|
||||
<swiper-item class="swiper-item" wx:for="{{lists[currentIndex].pictures}}" wx:key='idx' wx:for-index="idx" wx:for-item="it">
|
||||
<image src="{{it}}" mode="widthFix" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
<view class="zanting" catch:tap="onVideoPause" wx:if="{{!playing}}">
|
||||
<image src="/static/imgs/icon-zanting.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-cont">
|
||||
<view class="right">
|
||||
<image class="avatar" src="{{lists[currentIndex].user.avatar}}" mode="aspectFill" />
|
||||
<view class="right-item" catch:tap="doSubscribeFavorite" data-type='favorite' data-index='{{currentIndex}}'>
|
||||
<image src="{{!lists[currentIndex].is.favorite?'/static/imgs/icon_un_zan@2x.png':'/static/imgs/icon_zaned@2x.png'}}" mode="widthFix" />
|
||||
<!-- {{!lists[currentIndex].is.favorite?'点赞':lists[currentIndex].count.favorite}} -->
|
||||
{{lists[currentIndex].count.favorite}}
|
||||
</view>
|
||||
<view class="right-item" catch:tap="doSubscribeFavorite" data-type='subscribe' data-index='{{currentIndex}}'>
|
||||
<image src="{{!lists[currentIndex].is.subscribe?'/static/imgs/icon_un_shou@2x.png':'/static/imgs/icon_shoued@2x.png'}}" mode="widthFix" />
|
||||
<!-- {{!lists[currentIndex].is.subscribe?'收藏':lists[currentIndex].count.subscribe}} -->
|
||||
{{lists[currentIndex].count.subscribe}}
|
||||
</view>
|
||||
<button class="right-item" open-type="share" hover-class="none" data-obj='{{lists[currentIndex]}}'>
|
||||
<image style="width:40rpx;" src="/static/imgs/icon_share@2x.png" mode="widthFix" />分享
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname" style="padding-bottom:70rpx;">
|
||||
<view class="name"><span>@</span>{{lists[currentIndex].user.name}}</view>
|
||||
<view class="des">{{lists[currentIndex].describe}}</view>
|
||||
</view>
|
||||
</view>
|
||||
154
pages/found2/index2.wxss
Normal file
154
pages/found2/index2.wxss
Normal file
@@ -0,0 +1,154 @@
|
||||
/* pages/found2/index2.wxss */
|
||||
.found{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.found-cont{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
.zanting{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zanting image{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
#found-cont-video{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper{
|
||||
width: 100;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-item{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
}
|
||||
.swiper-item image{
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.right-cont{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 30rpx 20rpx 50rpx;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(to left,rgba(0, 0, 0, 0.432),rgba(248, 247, 247, 0.025));
|
||||
}
|
||||
|
||||
.right{
|
||||
font-size: 34rpx!important;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold!important;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 14vh;
|
||||
}
|
||||
|
||||
.right .avatar{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: solid 10rpx rgba(255, 255, 255, 0.2);
|
||||
border-radius: 120rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.right-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.right-item image{
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
.right button{
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
padding: 0 !important;
|
||||
background:transparent!important;
|
||||
width: 100rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.right button:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.nickname{
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 50rpx;
|
||||
background-image: linear-gradient(to top,rgba(0, 0, 0, 0.432),rgba(248, 247, 247, 0.025));
|
||||
bottom: 0;
|
||||
}
|
||||
.nickname .name{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nickname .name span{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.nickname .des{
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
word-break:break-all;
|
||||
}
|
||||
91
pages/found2/swiper.js
Normal file
91
pages/found2/swiper.js
Normal file
@@ -0,0 +1,91 @@
|
||||
// pages/swiper.js
|
||||
var startY, endY
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
isLoop : false,
|
||||
swiperNumber : 0,
|
||||
swiperArr : [],
|
||||
dataArr : [
|
||||
{ id: 0, type: "text", data: "0" },
|
||||
{ id: 1, type: "text", data: "1" },
|
||||
{ id: 2, type: "text", data: "2" },
|
||||
{ id: 3, type: "text", data: "3" },
|
||||
{ id: 4, type: "text", data: "4" },
|
||||
{ id: 5, type: "text", data: "5" }
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
let initData = this.data.dataArr.slice(0, 3)
|
||||
this.setData({
|
||||
swiperArr: initData
|
||||
})
|
||||
},
|
||||
// 触摸开始
|
||||
onStart(e){
|
||||
let { clientY } = e.changedTouches[0]
|
||||
startY = clientY
|
||||
},
|
||||
// 触摸结束
|
||||
onEnd(e){
|
||||
let { clientY } = e.changedTouches[0]
|
||||
endY = clientY
|
||||
if(startY-endY >50 || endY-startY>50){
|
||||
this.onIsDirection()
|
||||
}
|
||||
},
|
||||
// 计算前后滚动
|
||||
onIsDirection(){
|
||||
let { swiperArr, dataArr, swiperNumber } = this.data
|
||||
if(startY > endY){
|
||||
this.setData({
|
||||
swiperNumber: swiperNumber += 1,
|
||||
isLoop : true
|
||||
})
|
||||
let newNumber = swiperNumber%3 >= 2 ? 0 : swiperNumber%3 + 1
|
||||
let nextNumber = swiperNumber + 1
|
||||
|
||||
if(nextNumber >= dataArr.length){
|
||||
this.setData({
|
||||
isLoop: false
|
||||
})
|
||||
wx.showToast({
|
||||
title: '没有更多内容了~',
|
||||
icon : 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
swiperArr[newNumber] = dataArr[nextNumber]
|
||||
}else{
|
||||
this.setData({
|
||||
swiperNumber: swiperNumber > 0 ? swiperNumber -= 1: 0,
|
||||
isLoop : true
|
||||
})
|
||||
let newNumber = swiperNumber%3 <= 0 ? 2 : swiperNumber%3 - 1
|
||||
let preNumber = swiperNumber >= 0 ? swiperNumber - 1 : 0
|
||||
|
||||
if(preNumber < 0){
|
||||
this.setData({
|
||||
isLoop: false
|
||||
})
|
||||
wx.showToast({
|
||||
title: '没有更多内容了~',
|
||||
icon : 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
swiperArr[newNumber] = dataArr[preNumber]
|
||||
}
|
||||
this.setData({
|
||||
swiperArr
|
||||
})
|
||||
}
|
||||
})
|
||||
4
pages/found2/swiper.json
Normal file
4
pages/found2/swiper.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"disableScroll": true
|
||||
}
|
||||
14
pages/found2/swiper.wxml
Normal file
14
pages/found2/swiper.wxml
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular="{{isLoop}}"
|
||||
current="{{swiperCurrent}}"
|
||||
vertical
|
||||
bindchange="onChange"
|
||||
bindtouchstart="onStart"
|
||||
bindtouchend="onEnd"
|
||||
>
|
||||
<swiper-item wx:if="{{swiperArr.length > 0}}" wx:for="{{swiperArr}}" wx:key="index">
|
||||
<view class="swiper-text">轮播内容:{{item.data}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
5
pages/found2/swiper.wxss
Normal file
5
pages/found2/swiper.wxss
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
|
||||
.swiper{ width: 100vw; height: 100vh; background: #000011; }
|
||||
.swiper-text{ color: white; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
91
pages/found2/swiper2.js
Normal file
91
pages/found2/swiper2.js
Normal file
@@ -0,0 +1,91 @@
|
||||
// pages/index5/index5.js
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
viList: [{
|
||||
vio: 'https://assets.mixkit.co/videos/preview/mixkit-movement-in-a-large-avenue-at-night-in-timelapse-44688-large.mp4',
|
||||
avatar: 'https://profile-avatar.csdnimg.cn/6ef2193c2e9649c88356336c626e5777_m0_64944135.jpg',
|
||||
name: 'xiaoshen',
|
||||
id:1,
|
||||
},
|
||||
{
|
||||
vio: 'https://sgy-test-cdn.oss-cn-hangzhou.aliyuncs.com/attachments/2023/11/17/de99704d307d216800e08584111ca61f.mp4',
|
||||
avatar: ' https://profile.csdnimg.cn/7/A/9/1_2201_75886543',
|
||||
name: 'kami',
|
||||
id:2,
|
||||
},
|
||||
{
|
||||
vio: 'https://sgy-test-cdn.oss-cn-hangzhou.aliyuncs.com/attachments/2023/11/17/574217650a315865ce8833c31f8d9091.mp4',
|
||||
avatar: ' https://profile.csdnimg.cn/7/A/9/1_2201_75886543',
|
||||
name: 'kami',
|
||||
id:3
|
||||
},
|
||||
{
|
||||
vio: 'https://sgy-test-cdn.oss-cn-hangzhou.aliyuncs.com/attachments/2023/11/16/eb8debf3c9ef26eb6829a533709c08a1.mp4',
|
||||
avatar: ' https://profile.csdnimg.cn/7/A/9/1_2201_75886543',
|
||||
name: 'kami',
|
||||
id:4
|
||||
},
|
||||
{
|
||||
vio: 'https://sgy-test-cdn.oss-cn-hangzhou.aliyuncs.com/attachments/2023/11/17/ecb93a818d0e507b6d1a962ab83490c9.mp4',
|
||||
avatar: ' https://profile.csdnimg.cn/7/A/9/1_2201_75886543',
|
||||
name: 'kami',
|
||||
id:5
|
||||
}
|
||||
],
|
||||
stopIndex:0,
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
// 调用播放视频方法
|
||||
this.startUp()
|
||||
},
|
||||
|
||||
// 进页面时播放视频
|
||||
startUp() {
|
||||
// 获取video节点
|
||||
let createVideoContext = wx.createVideoContext('video0')
|
||||
// 播放视频
|
||||
createVideoContext.play()
|
||||
},
|
||||
|
||||
// 切换视频的时候播放视频
|
||||
// 注:此方法视频如果过大可能会叠音,所以视频需要压缩,或者可以尝试循环节点关闭视频
|
||||
nextVideo(e) {
|
||||
// 播放当前页面视频
|
||||
let index = 'video' + e.detail.current
|
||||
this.setData({
|
||||
stopIndex:e.detail.current
|
||||
})
|
||||
this.playVio(index)
|
||||
// 暂停前一个页面视频
|
||||
if (e.detail.current - 1 >= 0) {
|
||||
let index1 = 'video' + (e.detail.current - 1)
|
||||
this.pauseVio(index1)
|
||||
}
|
||||
// 暂停后一个页面视频
|
||||
if (e.detail.current + 1 < this.data.viList.length) {
|
||||
let index2 = 'video' + (e.detail.current + 1)
|
||||
this.pauseVio(index2)
|
||||
}
|
||||
},
|
||||
|
||||
// 播放视频
|
||||
playVio(index) {
|
||||
// 获取video节点
|
||||
let createVideoContext = wx.createVideoContext(index)
|
||||
// 播放视频
|
||||
createVideoContext.play()
|
||||
},
|
||||
|
||||
// 暂停视频
|
||||
pauseVio(index) {
|
||||
// 获取video节点
|
||||
let createVideoContext = wx.createVideoContext(index)
|
||||
// 暂停视频
|
||||
createVideoContext.seek(0)
|
||||
createVideoContext.pause()
|
||||
}
|
||||
})
|
||||
4
pages/found2/swiper2.json
Normal file
4
pages/found2/swiper2.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"disableScroll": true
|
||||
}
|
||||
15
pages/found2/swiper2.wxml
Normal file
15
pages/found2/swiper2.wxml
Normal file
@@ -0,0 +1,15 @@
|
||||
<swiper vertical="true" bindchange="nextVideo">
|
||||
<swiper-item wx:for="{{viList}}">
|
||||
<video loop="true" enable-progress-gesture="true" object-fit="contain" src="{{item.vio}}" id="video{{index}}" />
|
||||
<view class="video-right">
|
||||
<view class="video-right-img" style="margin-bottom: 10rpx; background-image: url({{item.avatar}})" data-user_id="{{item.id}}" bindtap="toOtherUser"></view>
|
||||
点赞 评论 转发
|
||||
</view>
|
||||
<view class="video-btm">
|
||||
<view class="video-btm-con">
|
||||
<text>@{{item.name}}</text><text>\t创建时间</text>
|
||||
<view>标题</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
46
pages/found2/swiper2.wxss
Normal file
46
pages/found2/swiper2.wxss
Normal file
@@ -0,0 +1,46 @@
|
||||
page{
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
swiper{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
swiper video{
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-right{
|
||||
height: 38vh;
|
||||
width: 80rpx;
|
||||
position: fixed;
|
||||
right: 15rpx;
|
||||
top: 50vh;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.video-right-img{
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
border-radius: 100rpx;
|
||||
background-color: aquamarine;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.video-btm{
|
||||
height: 180rpx;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.video-btm-con{
|
||||
width: 90vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user