Commit 5781f964 authored by 潘永坪's avatar 潘永坪

组合票优化

parent 2e4546f3
<!-- 修改这个页面时,需要同步更新combiChoose页面的代码 -->
<template>
<view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
......@@ -50,13 +50,15 @@
</view>
<!-- 列表部分 -->
<view class="middle-bottom" :style="middleBottomStyle">
<scroll-view class="scroll-left" :style="{height:scrlllHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
<!-- 左边滚动条 -->
<scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
<view class="middle-left">
<view :id="'merchant-tab'+index" class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
{{item.name}}
</view>
</view>
</scroll-view>
<!-- 右边滚动条 -->
<scroll-view @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
<view class="middle-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
......@@ -227,13 +229,14 @@ export default {
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
heightArr:[],//元素高度数组
scrlllHeight:0,//中间盒子滚动时的高度
scrollHeight:0,//中间盒子滚动时的高度
originHeight:0,//中间盒子原本高度
middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
showTransition:true
toViewFull:'',//全屏滚动到某个元素
showTransition:true,//控制动画显示隐藏
}
},
watch: {
......@@ -441,7 +444,7 @@ export default {
//获取中间盒子需要滚动时的高度
uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
if(data){
this.scrlllHeight=windowHeight-data.height
this.scrollHeight=windowHeight-data.height
}
}).exec()
//获取中间盒子原本高度
......@@ -530,13 +533,15 @@ export default {
},
//---商家下标切换
merchantTabChange(index){
//点击左边,全屏先置顶
this.toViewFull='middle'
//点击左边,右边可滚动
this.middleHeight=this.scrlllHeight
//加个延时,防止第一次点击时无效果
setTimeout(()=>{
this.middleHeight=this.scrollHeight
this.merchantIndex=index
//加个延时,防止第一次点击时无效果
this.$nextTick(()=>{
this.toViewRight='merchant'+index
},150)
})
},
//---展示明细弹窗
showDetail() {
......@@ -550,10 +555,10 @@ export default {
if(data){
//20=中间盒子top:-20的值
height=data.height-20
if(e.detail.scrollTop>height){
if(e.detail.scrollTop>=height){
//商家信息固定,中间可滚动,全屏不滚动
this.middleInfoStyle='top:0;position:fixed;'
this.middleHeight=this.scrlllHeight
this.middleHeight=this.scrollHeight
this.middleBottomStyle='margin-top:50px'
this.showTransition=false
}else{
......@@ -572,12 +577,6 @@ export default {
scrollRight(e) {
setTimeout(()=>{
let scrollTop=e.detail.scrollTop
// if(scrollTop==0){
// //当滑到顶部时,上面固定元素还原
// this.middleInfoStyle='position:relative;'
// this.middleBottomStyle='margin-top:0'
// this.middleHeight=3000
// }
//通过滚动值获取下标
this.heightArr.forEach((item,i)=>{
if(i==0){
......
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