Skip to content

U
uni-pdtravel
Commit 62230994 authored by 潘永坪's avatar 潘永坪
Browse files
Options

组合票页面视频加载处理

parent 2c59cc26
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 83 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 62230994
......@@ -3,7 +3,7 @@
<view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
<view class="banner" id='banner'>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:16px" height="400" :interval='interval' circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
......@@ -221,6 +221,7 @@ export default {
},
data() {
return {
interval:3000,//轮播时间
currentMerchant:'',//当前入口商家信息
showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据
......@@ -433,6 +434,22 @@ export default {
//获取当前景区图片,把当前景区放在第一位
if (item.id == this.merchantId) {
this.imgList = item.imgList
//视频排在图片前面
this.imgList.sort((a,b)=>{
return b.type-a.type
})
//类型转化，用于视频播放
this.imgList.forEach(item2=>{
if(item2.type==1){
//图片
item2.type='image'
}
if(item2.type==2){
//如果有视频，轮播时间改为60秒
item2.type='video'
this.interval=100*1000
}
})
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
......@@ -641,8 +658,8 @@ export default {
let scrollTop=e.detail.scrollTop
let selectFun=(data)=>{
if(data){
//20为中间盒子的top-20
height=data.height+this.middleTopHeight-20-this.topHeight
//10为中间盒子的top-10
height=data.height+this.middleTopHeight-10-this.topHeight
let opacity=scrollTop/(data.height)
this.tabbarOpacity=parseFloat(opacity.toFixed(2))
//下面值取整数，防止部分手机取值太多小数，出现抖动的bug
......@@ -895,7 +912,7 @@ export default {
.middle {
padding-bottom: 100rpx;
position: relative;
top: -20px;
top: -10px;
}
// 中间上部分
.middle-top{
......
pages/indexs/center/center.vue
View file @ 62230994
......@@ -169,14 +169,14 @@
咨询电话
</view>
</view>
<view class="middle3-list" @click="goSuggest()">
<!-- <view class="middle3-list" @click="goSuggest()">
<view>
<image src="@/static/img/my/center/suggest.png"></image>
</view>
<view>
建议投诉
</view>
</view>
</view> -->
</view>
</view>
</view>
......
uview-ui/components/u-swiper/u-swiper.vue
View file @ 62230994
......@@ -65,6 +65,7 @@
height: $u.addUnit(height)
}"
controls
:autoplay='ifAutoplay(index)'
@tap="clickHandler(index)"
></video>
<text
......@@ -90,8 +91,8 @@
</template>
<script>
import props from './props.js';
/**
import props from './props.js'
/**
* Swiper 轮播图
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
* @tutorial https://www.uviewui.com/components/swiper.html
......@@ -123,82 +124,90 @@
* @event {Function(index)} change 轮播图切换时触发(自动或者手动切换) index：切换到了第几张图片，从0开始
* @example <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
*/
export default {
name: 'u-swiper',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
currentIndex: 0
}
},
watch: {
current(val, preVal) {
if(val === preVal) return;
this.currentIndex = val; // 和上游数据关联上
}
},
computed: {
itemStyle() {
return index => {
const style = {}
// #ifndef APP-NVUE || MP-TOUTIAO
// 左右流出空间的写法不支持nvue和头条
// 只有配置了此二值，才加上对应的圆角，以及缩放
if (this.nextMargin && this.previousMargin) {
style.borderRadius = uni.$u.addUnit(this.radius)
if (index !== this.currentIndex) style.transform = 'scale(0.92)'
}
// #endif
return style
}
}
},
methods: {
getItemType(item) {
if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
if (typeof item === 'object' && this.keyName) {
if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
if (item.type === 'image') return 'image'
if (item.type === 'video') return 'video'
return 'image'
export default {
name: 'u-swiper',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
currentIndex: 0
}
},
watch: {
current(val, preVal) {
if(val === preVal) return
this.currentIndex = val // 和上游数据关联上
}
},
computed: {
itemStyle() {
return index => {
const style = {}
// #ifndef APP-NVUE || MP-TOUTIAO
// 左右流出空间的写法不支持nvue和头条
// 只有配置了此二值，才加上对应的圆角，以及缩放
if (this.nextMargin && this.previousMargin) {
style.borderRadius = uni.$u.addUnit(this.radius)
if (index !== this.currentIndex) style.transform = 'scale(0.92)'
}
},
// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
getSource(item) {
if (typeof item === 'string') return item
if (typeof item === 'object' && this.keyName) return item[this.keyName]
else uni.$u.error('请按格式传递列表参数')
return ''
},
// 轮播切换事件
change(e) {
// 当前的激活索引
const {
current
} = e.detail
this.pauseVideo(this.currentIndex)
this.currentIndex = current
this.$emit('change', e.detail)
},
// 切换轮播时，暂停视频播放
pauseVideo(index) {
const lastItem = this.getSource(this.list[index])
if (uni.$u.test.video(lastItem)) {
// 当视频隐藏时，暂停播放
const video = uni.createVideoContext(`video-${index}`, this)
video.pause()
}
},
// 当一个轮播item为视频时，获取它的视频海报
getPoster(item) {
return typeof item === 'object' && item.poster ? item.poster : ''
},
// 点击某个item
clickHandler(index) {
this.$emit('click', index)
}
},
}
// #endif
return style
}
}
},
methods: {
//---是否自动播放
ifAutoplay(index){
if(index==0){
return true
}else{
return false
}
},
getItemType(item) {
if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
if (typeof item === 'object' && this.keyName) {
if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
if (item.type === 'image') return 'image'
if (item.type === 'video') return 'video'
return 'image'
}
},
// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
getSource(item) {
if (typeof item === 'string') return item
if (typeof item === 'object' && this.keyName) return item[this.keyName]
else uni.$u.error('请按格式传递列表参数')
return ''
},
// 轮播切换事件
change(e) {
// 当前的激活索引
const {
current
} = e.detail
this.pauseVideo(this.currentIndex)
this.currentIndex = current
this.$emit('change', e.detail)
},
// 切换轮播时，暂停视频播放
pauseVideo(index) {
const lastItem = this.getSource(this.list[index])
if (uni.$u.test.video(lastItem)) {
// 当视频隐藏时，暂停播放
const video = uni.createVideoContext(`video-${index}`, this)
video.pause()
}
},
// 当一个轮播item为视频时，获取它的视频海报
getPoster(item) {
return typeof item === 'object' && item.poster ? item.poster : ''
},
// 点击某个item
clickHandler(index) {
this.$emit('click', index)
}
},
}
</script>
<style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment