|
|
@@ -1,9 +1,8 @@
|
|
|
<template>
|
|
|
<view class="container body">
|
|
|
<view class="info">
|
|
|
- <scroll-view class="scroll-view" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
|
|
|
- @scroll="handleScroll">
|
|
|
- <view class="list-scroll-view" id="top">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
<slot></slot>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -12,13 +11,9 @@
|
|
|
<view class="list" v-for="(item,index) in barList" :key="index" @tap="toPath(index,item)">
|
|
|
<image class="image" :src="item.normal" mode="" v-if="active!=index"></image>
|
|
|
<image class="image" :src="item.active" mode="" v-else></image>
|
|
|
- <view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}
|
|
|
- </view>
|
|
|
+ <view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="backTop" v-if="isShow==true">
|
|
|
- <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -67,10 +62,7 @@
|
|
|
active: require('@/static/my_1.png'),
|
|
|
type: '0'
|
|
|
},
|
|
|
- ],
|
|
|
- // 是否显示返回顶部
|
|
|
- isShow: false,
|
|
|
- topItem: '',
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
created: function() {
|
|
|
@@ -90,19 +82,7 @@
|
|
|
const that = this;
|
|
|
that.$set(that, `active`, index);
|
|
|
that.$emit('toPath', item)
|
|
|
- },
|
|
|
- // 计算高度
|
|
|
- handleScroll(e) {
|
|
|
- const that = this;
|
|
|
- let scrollTop = e.detail.scrollTop;
|
|
|
- that.isShow = scrollTop > 100;
|
|
|
- that.topItem = '';
|
|
|
- },
|
|
|
- // 返回顶部
|
|
|
- backTop() {
|
|
|
- const that = this;
|
|
|
- that.topItem = 'top'
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -151,16 +131,4 @@
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .backTop {
|
|
|
- position: fixed;
|
|
|
- bottom: 20vw;
|
|
|
- right: 5vw;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 30px;
|
|
|
- background-color: #0000005f;
|
|
|
- border-radius: 90px;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+</style>
|
