<view
style="width: 100%;height: 60rpx;background-color: #f0f0f0;display: flex;justify-content: center;border-bottom: #c5c4c8 5rpx solid;">
<image style="width: 10px;height: 15px;" src="../../static/showMore.png" mode="aspectFill"></image>
</view>
<view style="background-color: #f0f0f0;">
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
style="height:calc(100vh - 375upx)">
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" key="index" @tap="TabSelect" :data-id="index"> {{item.xqmc}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx);" scroll-into-view="''+mainCur"> <view class="padding-top padding-lr" style="background: #f0f0f0;" v-for="(item,index) in list"
key="index" :id="''+index" @click="tz(item.id)">
<view class="cu-bar solid-bottom bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text> {{item.xqmc}}
<!-- <text style="font-size: smaller; margin-left: 15rpx;">{{item.wgzxm}}</text>
<text style="font-size: smaller;margin-left: 10rpx;">{{item.sjhm}}</text> -->
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import {get,post} from '@/utils/request'
import cqszUtils from '@/utils/cqszUtils'
export default {
data() {
return {
height: 'height: 500px;',
id: '',
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true,
latitude: 30.93922,
longitude: 108.717751,
obj: [{
latitude: 30.93922,
longitude: 108.717751,
iconPath: '../../../static/location.png'
}],
isShow: true,
polylines: [{
points: [
{
latitude: 30.939483,
longitude: 108.714216
},
{
latitude: 30.942133,
longitude: 108.717692
},
{
latitude: 30.941875,
longitude: 108.723185
},
{
latitude: 30.939409,
longitude: 108.722499
},
{
latitude: 30.939483,
longitude: 108.714216
},
],
strokeColor: "#FD302F",
strokeWidth: 2,
fillColor: "#FD302F4C",
zIndex: 100,
}]
};
},
onLoad(e) {
},
onReady() {
uni.hideLoading()
this.polylines=[{
points: [
{
"latitude": 30.939483,
"longitude": 108.714216
},
{
"latitude": 30.942133,
"longitude": 108.717692
},
{
"latitude": 30.941875,
"longitude": 108.723185
},
{
"latitude": 30.939409,
"longitude": 108.722499
},
{
"latitude": 30.939483,
"longitude": 108.714216
},
],
strokeColor: "#FD302F",
strokeWidth: 2,
fillColor: "#FD302F4C",
zIndex: 999999999,
}]
},
methods: {
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 25
},
// VerticalMain(e) {
// // #ifdef MP-ALIPAY
// return false //支付宝小程序暂时不支持双向联动
// // #endif
// let that = this;
// let tabHeight = 0;
// if (this.load) {
// for (let i = 0; i < this.list.length; i++) {
// let view = uni.createSelectorQuery().select("#" + this.list[i].id);
// view.fields({
// size: true
// }, data => {
// this.list[i].top = tabHeight;
// tabHeight = tabHeight + data.height;
// this.list[i].bottom = tabHeight;
// }).exec();
// }
// this.load = false
// }
// let scrollTop = e.detail.scrollTop;
// for (let i = 0; i < this.list.length; i++) {
// if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
// this.verticalNavTop = (this.list[i].id - 1) * 25
// this.tabCur = this.list[i].id
// console.log(scrollTop)
// return false
// }
// }
// }
},
}
</script>
<style>
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 250upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>
1 个回复
四季三餐
app nvue 2.1.5 +说显示,用nvue 做依旧不显示哎