细节修改

version/0412
fanfan 12 months ago
parent 70be2ae2ab
commit fa68b3fb05
  1. 52
      pages/category/index.vue
  2. 11
      pages/serve/install.vue

@ -8,22 +8,25 @@
</view> </view>
<view class="u-menu-wrap"> <view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId"> :scroll-into-view="itemId">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']" <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
@tap.stop="swichMenu(index)"> :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text> <text class="u-line-1">{{item.name}}</text>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll"> <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
@scroll="rightScroll">
<view class="page-view"> <view class="page-view">
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index"> <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
<view class="item-box" v-for="(item1, index1) in item.children" :key="index1" > <view class="item-box" v-for="(item1, index1) in item.children" :key="index1">
<view class="item-title"> <view class="item-title">
<text>{{item1.name}}</text> <text>{{item1.name}}</text>
</view> </view>
<view class="item-container"> <view class="item-container">
<view class="thumb-box" @click="goodsDetail(item2)" v-for="(item2, index2) in item1.children" :key="index2"> <view class="thumb-box" @click="goodsDetail(item2)"
<image class="item-menu-image" :src="item2.image?item2.image.external_url:''" mode=""></image> v-for="(item2, index2) in item1.children" :key="index2">
<image class="item-menu-image" :src="item2.image?item2.image.external_url:''"
mode=""></image>
<view class="item-menu-name">{{item2.name}}</view> <view class="item-menu-name">{{item2.name}}</view>
</view> </view>
</view> </view>
@ -51,7 +54,7 @@
arr: [], arr: [],
scrollRightTop: 0, // scroll-view scrollRightTop: 0, // scroll-view
timer: null, // timer: null, //
} }
}, },
onLoad() { onLoad() {
@ -75,16 +78,18 @@
}, },
// //
async swichMenu(index) { async swichMenu(index) {
if(this.arr.length == 0) { console.log(index)
if (this.arr.length == 0) {
await this.getMenuItemTop(); await this.getMenuItemTop();
} }
if (index == this.current) return; if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop; this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function(){ this.$nextTick(function() {
this.scrollRightTop = this.arr[index];
this.current = index; this.current = index;
this.scrollRightTop = this.arr[index];
this.leftMenuStatus(index); this.leftMenuStatus(index);
}) })
console.log(index, this.current)
}, },
getGoodsTypeList() { getGoodsTypeList() {
const that = this; const that = this;
@ -143,10 +148,10 @@
await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight'); await this.getElRect('u-tab-item', 'menuItemHeight');
} }
this.current = index; // this.current = index+1;
// item // item
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
}, },
// item // item
getMenuItemTop() { getMenuItemTop() {
@ -154,11 +159,11 @@
let selectorQuery = uni.createSelectorQuery(); let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => { selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// rects[](selectAll) // rects[](selectAll)
if(!rects.length) { if (!rects.length) {
setTimeout(() => { setTimeout(() => {
this.getMenuItemTop(); this.getMenuItemTop();
}, 10); }, 10);
return ; return;
} }
rects.forEach((rect) => { rects.forEach((rect) => {
// rects[0].top() // rects[0].top()
@ -171,11 +176,11 @@
// //
async rightScroll(e) { async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop; this.oldScrollTop = e.detail.scrollTop;
if(this.arr.length == 0) { if (this.arr.length == 0) {
await this.getMenuItemTop(); await this.getMenuItemTop();
} }
if(this.timer) return ; if (this.timer) return;
if(!this.menuHeight) { if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect('menu-scroll-view', 'menuHeight');
} }
setTimeout(() => { // setTimeout(() => { //
@ -188,7 +193,7 @@
// height2 // height2
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) { if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i); this.leftMenuStatus(i);
return ; return;
} }
} }
}, 10) }, 10)
@ -287,12 +292,15 @@
.class-item:last-child { .class-item:last-child {
min-height: 100vh; min-height: 100vh;
} }
.item-box{
.item-box {
margin-top: 30rpx; margin-top: 30rpx;
&:first-child{
&:first-child {
margin-top: 0; margin-top: 0;
} }
} }
.item-title { .item-title {
font-size: 28rpx; font-size: 28rpx;
color: $u-main-color; color: $u-main-color;

@ -49,8 +49,15 @@
}, },
methods: { methods: {
onLookCord(url) { onLookCord(url) {
this.showQRCodePopup = true uni.previewImage({
this.qrcode = createQrCodeImg(url, { 'size': 500 }); urls: [url], //httpurl
current: '', // http
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
// this.showQRCodePopup = true
// this.qrcode = createQrCodeImg(url, { 'size': 500 });
}, },
/** /**
* 获取列表 * 获取列表

Loading…
Cancel
Save