Skip to content

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

新页面ios系统还需要测试版本

parent b7168536
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 512 additions and 427 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 7c434f78
......@@ -2,7 +2,7 @@
<template>
<view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
<view class="banner">
<view class="banner" id='banner'>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
......@@ -191,7 +191,7 @@
<!-- 自定义导航栏 -->
<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
<view class="tabbar-title">
<u-icon name="arrow-left" color="#333333" size="48"></u-icon>
<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
<text>选择产品</text>
<text></text>
</view>
......@@ -324,7 +324,7 @@ export default {
//处理苹果手机下面有根横线，影响选中产品明细的操作
let platform = uni.getSystemInfoSync().platform
if(platform=='ios'){
this.bottomStyle='height:140rpx;'
this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
this.middleStyle='padding-bottom:140rpx;'
}
},
......@@ -442,41 +442,44 @@ export default {
this.$nextTick(() => {
//清空数组
this.heightArr=[]
//获取中间盒子需要滚动时的高度
uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
if(data){
this.middleTopHeight=data.height
}
}).exec()
//获取中间盒子原本高度
uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
}
}).exec()
//不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery()
for(let i=0;i<this.scenicList.length;i++){
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
}
uni.getSystemInfo({
complete:(info)=> {
let windowHeight=info.windowHeight||844
//获取中间盒子需要滚动时的高度
uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
if(data){
//40为middle的top-20值，还有middle-bottom盒子距离顶部的距离20
this.middleTopHeight=data.height
this.scrollHeight=windowHeight-data.height-40
}
}).exec()
//获取中间盒子原本高度
uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
if(data){
this.originHeight=data.height
this.middleHeight=data.height
this.scrollHeight=windowHeight-data.height-this.topHeight
}
}).exec()
//不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery()
for(let i=0;i<this.scenicList.length;i++){
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
}
}
})
......@@ -540,11 +543,18 @@ export default {
//---商家下标切换
merchantTabChange(index){
//点击左边，全屏先置顶
this.toViewFull='middle-bottom'
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
// 数据更新后，视图的更新是异步的,防止点击无效
this.$nextTick(()=>{
this.toViewFull='middle-bottom'
})
//点击左边，右边可滚动
this.merchantIndex=index
this.middleHeight=this.scrollHeight
//加个延时，防止第一次点击时元素样式还未更新，导致不滑动到对应元素
//为了让scrollview能检测到滚动数据的变化
this.toViewRight='aaa'
// 数据更新后，视图的更新是异步的,防止第一次点击无效
this.$nextTick(()=>{
this.toViewRight='merchant'+index
})
......@@ -560,17 +570,17 @@ export default {
let scrollTop=e.detail.scrollTop
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
if(data){
//30为中间盒子的top-20和滚动条的margintop值(可以根据效果进行微调，过小可能引起上下一直抖动)
height=data.height+this.middleTopHeight-this.topHeight-30
//20为中间盒子的top-20
height=data.height+this.middleTopHeight-20-this.topHeight
let opacity=scrollTop/(data.height)
this.tabbarOpacity=parseFloat(opacity.toFixed(2))
if(scrollTop>=height){
//中间上部分固定，中间下部分可滚动，全屏不滚动
//中间上部分固定，中间下部分可滚动，全屏不滚动
this.middleHeight=this.scrollHeight
}else{
//中间上部分不固定，中间下部分不可滚动，全屏滚动'
//中间上部分不固定，中间下部分不可滚动，全屏滚动'
this.middleHeight=this.originHeight
}
}
}
}).exec()
......@@ -597,6 +607,15 @@ export default {
},5)
},
//---回到顶部
goTop(){
this.middleHeight=this.originHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
this.$nextTick(()=>{
this.toViewFull='banner'
})
},
//---导航
navigation(merchant){
uni.openLocation({
......@@ -774,6 +793,7 @@ export default {
.wrap {
height: 100%;
background: #f7f7f7;
overflow-anchor:auto;
}
.middle {
padding-bottom: 100rpx;
......@@ -852,12 +872,10 @@ export default {
z-index: 1;
}
.scroll-left{
width: 130rpx;
flex-shrink: 0;
padding: 12px 24rpx 0 0;
}
.scroll-right{
box-sizing: border-box;
width: 154rpx;
}
.middle-left{
font-size: 24rpx;
......@@ -879,7 +897,7 @@ export default {
}
.merchantlist-wrap{
background: #f7f7f7;
padding-top:24rpx;
padding-top:12px;
}
.merchantlist {
border-radius: 20rpx;
......@@ -1070,9 +1088,7 @@ export default {
color: #ffffff;
font-weight: bold;
margin:0 10rpx;
}
.bottom-btn {
display: inline-block;
width: 200rpx;
......
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