index wxml
<!-- 视频标签 -->
<view>
<view class="top" style="margin-top: {{navTop*2}}rpx;">
<!-- 轮播图组件 -->
<swiper wx:if="{{seeShow}}" bindchange="goodsDetailIndex" class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" current="{{currentIndex}}"
:duration="1000" circular="true">
<block wx:for="{{videos.imgList}}" wx:key="index">
<swiper-item>
<image class="img" src="{{item}}" catchtap='groupClick' data-item='{{item}}'></image>
</swiper-item>
</block>
</swiper>
<!-- 视频播放组件 -->
<view wx:else class="btnVideos" data-e="{{e}}" cancelable="false" catchtouchstart="start" catchtouchend="end">
<videos videos="{{videos.videos}}"></videos>
</view>
<block wx:if="{{seeShow && videos.videos}}">
<view class="see" bindtap="btnSee">观看视频</view>
<view class="position">{{slideshowIndex}}/{{videos.imgList.length}}</view>
</block>
<!-- 退出播放 -->
<view wx:if="{{!seeShow}}" class="btnClass" catchtap="btn"><text class="offVideo">退出播放</text></view>
</view>
<view class="center">
仿京东轮播图
</view>
</view>
index js
Page({
data: {
seeShow: true,
videos: {},
slideshowIndex: 1,
currentIndex: 0
},
onLoad: function () {
// 头部自定义导航
this.nav()
// 轮播图
this.selector()
},
nav(){
try {
const res = wx.getSystemInfoSync()
console.log(res);
console.log(res.pixelRatio,'设备像素比') // 设备像素比
console.log(res.windowWidth,'可使用窗口宽度，单位px') // 可使用窗口宽度，单位px
console.log(res.windowHeight,'可使用窗口高度，单位px') // 可使用窗口高度，单位px
console.log(res.screenWidth,'屏幕宽度，单位px'); // 屏幕宽度，单位px
console.log(res.screenHeight,'屏幕高度，单位px'); // 屏幕高度，单位px
console.log(res.screenHeight - res.windowHeight , '导航高度');
console.log(res.statusBarHeight, '设备的高度');
const resed = wx.getMenuButtonBoundingClientRect()
console.log(resed);
console.log(resed.height, '按钮的高度'); // 按钮的高度
console.log(resed.width,'按钮的宽度');
console.log(resed.left,'离左边的宽度');
// 吸顶高度
const navTop = res.statusBarHeight
// 背景图的高度
const navHight = res.statusBarHeight + resed.height + (resed.top - res.statusBarHeight )*2
// 系统按钮离左边的距离
const navLeft = resed.left
// 搜索框的宽度
const searchWidth = resed.left - 20 // 这里宽度是自己定的
// 搜索框里左边的宽度
const searchLeft = 10 // 这里宽度是自己定的 / 2
// 系统按钮离顶部的距离
const searchTop = resed.top - res.statusBarHeight
// 系统按钮的高度
const systemHeight = resed.height
// 背景图的宽度
const navWidth = res.windowWidth
this.setData({
navWidth,
searchTop,
navLeft,
searchWidth,
searchLeft,
navHight,
navTop,
systemHeight
})
} catch (e) {
// Do something when catch error
}
},
selector() {
var that = this
// 页面加载到详情页 获取详情页要渲染的数据
var api = '公司api无法透露'
wx.request({
url: api,
data: {
productId: 9,
userId: 261,
partnerId: 0,
platform: 'miniProgram',
},
success(res) {
console.log(res.data.data);
that.setData({
videos: res.data.data.swiperList
})
console.log(that.data.videos.videos);
console.log(res.data.data.swiperList.videos);
}
})
},
btnSee() {
this.setData({
seeShow: false
})
},
btn() {
this.setData({
seeShow: true
})
},
goodsDetailIndex(e) {
this.setData({
imgListIndex: e.detail.current + 1
})
},
popup(e) {
const position = e.currentTarget.dataset.position
let customStyle = ''
let duration = this.data.duration
switch (position) {
case 'top':
case 'bottom':
customStyle = 'height: 80%;'
break
case 'right':
break
}
this.setData({
position,
show: true,
customStyle,
duration
})
},
//手指开始触屏
start: function (e) {
//获取触摸的原始点
this.setData({
touchX: e.touches.length > 0 ? e.touches[0].pageX : 0,
})
},
//手指结束触屏
end: function (e) {
let touchX = e.changedTouches.length > 0 ? e.changedTouches[0].pageX : 0
let tmX = touchX - this.data.touchX
//滑动swiper，视频停止播放
this.setData({
seeShow: true
})
if (tmX < 0) {
//左滑
console.log(this.data.slideshowIndex);
var a = this.data.slideshowIndex
if (this.data.slideshowIndex == this.data.videos.imgList.length) {
a = 0
}
this.setData({
slideshowIndex: a,
currentIndex: a
})
} else {
//右滑
var b = this.data.slideshowIndex - 1
if (this.data.slideshowIndex == 1) {
b = this.data.videos.imgList.length
}
this.setData({
slideshowIndex: b,
currentIndex: b - 1
})
}
},
goodsDetailIndex(e) {
this.setData({
slideshowIndex: e.detail.current + 1,
currentIndex: e.detail.current
})
},
groupClick(e){
console.log(this.data.videos);
wx.previewImage({
current: e.currentTarget.dataset.item, // 当前显示图片的http链接
urls: this.data.videos.imgList // 需要预览的图片http链接列表
})
},
})
index json
{
"navigationStyle": "custom",
"usingComponents": {
"videos":"/components/videos/videos"
}
}
index wxss
page{
background-color: #f7f7f7;
}
.btnClass{
display: flex;
justify-content: center;
align-items: center;
height: 93rpx;
background-color: #000;
}
.offVideo{
color: #3399ff;
padding: 10rpx 20rpx;
border-radius: 60rpx;
background-color: #ccc;
}
.img{
width: 100%;
height: 750rpx;
}
.swiper{
width: 100%;
height: 750rpx;
}
.top{
position: relative;
}
.see{
position: absolute;
bottom: 20rpx;
left: 50%;
transform: translateX(-50%);
padding: 10rpx 20rpx;
border-radius: 30rpx;
color: #3399ff;
background-color: rgba(240, 238, 238,.6);
}
.btnVideos{
background-color: #000;
}
.position{
position: absolute;
right: 0;
bottom: 30rpx;
color: #f7f7f7;
background-color: rgba(0, 0, 0,.3);
padding: 0rpx 20rpx;
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.center{
margin-top: 20rpx;
text-align: center;
background-color: #3399ff;
}
组件 videos.js
Component({
/**
* 组件的属性列表
*/
properties: {
videos:{
type:String,
value:'',
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
组件 json
{
"component": true,
"usingComponents": {}
}
组件 wxml
<view>
<video class="videos" src="{{videos}}" autoplay="true" enable-progress-gesture="{{false}}"></video>
</view>
组件 wxss
.videos{
width: 100%;
height: 650rpx;
}
商品图片 和视频
