Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化分类页面逻辑，右侧滑动左侧联动BUG，待验证

master
邓平艺 4 years ago
parent
b675761621
commit
cb7ef86d40
2 changed files with 7 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      pages/index/category/category.vue
  2. 225
      pages/index/category/testdata.js

10
pages/index/category/category.vue
View File

@ -11,11 +11,11 @@
</view>
<!-- 分类 -->
<view class="page" v-if="current == 0 && dataArr.length">
<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }">
<scroll-view class="left_view p_r" :scroll-into-view="left_tabview" scroll-y :style="{ height: autoHeight }">
<block v-for="(item, index) in dataArr" :key="index">
<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view>
</block>
<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
<view class="seletItem" :id="'tab_'+ left_selectIndex" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
</scroll-view>
<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation>
@ -92,7 +92,6 @@
<script>
import lfNav from '@/components/lf-nav/lf-nav.vue';
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
import testdata from './testdata.js';
let app = getApp();
export default {
@ -102,6 +101,7 @@
subItemW: 0,
left_selectIndex: 0,
right_selectIndex: 0,
left_tabview: 'tab_0', // 默认和left_selectIndex对应，scroll-view定位到的左侧tab元素
ttscrollH: 0, //总高度
placeholderH: 0, //占位高度
heighArr: [],
@ -271,6 +271,10 @@
// return;
// }
this.left_selectIndex = findInx;
this.left_tabview = '';
setTimeout(() => {
this.left_tabview = 'tab_'+ findInx; // TODO 待验证是否跟随滚动
}, 0);
},
// 计算高度
computerH: function() {

225
pages/index/category/testdata.js
View File

@ -1,225 +0,0 @@
export default [{
name: '面部护肤',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '香水彩妆',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '精致洗护',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称2'
},
{
img: 'https://picsum.photos/200',
name: '名称2'
}
]
},
{
name: '国际精品',
subArr: [{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
}
]
},
{
name: '服装内衣',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '首饰配饰',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '数码家电',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '鞋履箱包',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '滋补保健',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '好好说说',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
}
]
Write Preview
Loading…
Cancel
Save