From fa68b3fb0576905c40a0f93efe8254874318a767 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Tue, 12 Mar 2024 17:30:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/category/index.vue | 52 +++++++++++++++++++++++-----------------
pages/serve/install.vue | 11 +++++++--
2 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/pages/category/index.vue b/pages/category/index.vue
index 1c490fa..9eb89e2 100644
--- a/pages/category/index.vue
+++ b/pages/category/index.vue
@@ -8,22 +8,25 @@
</view>
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
- :scroll-into-view="itemId">
- <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
- @tap.stop="swichMenu(index)">
+ :scroll-into-view="itemId">
+ <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
+ :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text>
</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="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="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-title">
<text>{{item1.name}}</text>
</view>
<view class="item-container">
- <view class="thumb-box" @click="goodsDetail(item2)" 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="thumb-box" @click="goodsDetail(item2)"
+ 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>
</view>
@@ -51,7 +54,7 @@
arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
-
+
}
},
onLoad() {
@@ -75,16 +78,18 @@
},
// 点击左边的栏目切换
async swichMenu(index) {
- if(this.arr.length == 0) {
+ console.log(index)
+ if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
- this.$nextTick(function(){
- this.scrollRightTop = this.arr[index];
+ this.$nextTick(function() {
this.current = index;
+ this.scrollRightTop = this.arr[index];
this.leftMenuStatus(index);
})
+ console.log(index, this.current)
},
getGoodsTypeList() {
const that = this;
@@ -143,10 +148,10 @@
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
- this.current = index;
+ // this.current = index+1;
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-
+
},
// 获取右边菜单每个item到顶部的距离
getMenuItemTop() {
@@ -154,11 +159,11 @@
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
- if(!rects.length) {
+ if (!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
- return ;
+ return;
}
rects.forEach((rect) => {
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
@@ -171,11 +176,11 @@
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
- if(this.arr.length == 0) {
+ if (this.arr.length == 0) {
await this.getMenuItemTop();
}
- if(this.timer) return ;
- if(!this.menuHeight) {
+ if (this.timer) return;
+ if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight');
}
setTimeout(() => { // 节流
@@ -188,7 +193,7 @@
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
- return ;
+ return;
}
}
}, 10)
@@ -287,12 +292,15 @@
.class-item:last-child {
min-height: 100vh;
}
- .item-box{
+
+ .item-box {
margin-top: 30rpx;
- &:first-child{
+
+ &:first-child {
margin-top: 0;
}
}
+
.item-title {
font-size: 28rpx;
color: $u-main-color;
diff --git a/pages/serve/install.vue b/pages/serve/install.vue
index 47380f4..682b7a8 100644
--- a/pages/serve/install.vue
+++ b/pages/serve/install.vue
@@ -49,8 +49,15 @@
},
methods: {
onLookCord(url) {
- this.showQRCodePopup = true
- this.qrcode = createQrCodeImg(url, { 'size': 500 });
+ uni.previewImage({
+ urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
+ current: '', // 当前显示图片的http链接，默认是第一个
+ success: function(res) {},
+ fail: function(res) {},
+ complete: function(res) {},
+ })
+ // this.showQRCodePopup = true
+ // this.qrcode = createQrCodeImg(url, { 'size': 500 });
},
/**
* 获取列表