Browse Source

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

master
邓平艺 4 years ago
parent
commit
cb7ef86d40
  1. 10
      pages/index/category/category.vue
  2. 225
      pages/index/category/testdata.js

10
pages/index/category/category.vue

@ -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_selectIndexscroll-viewtab
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

@ -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'
}
]
}
]
Loading…
Cancel
Save