电器系统

packageCase/electricAppliances/index.vue

@@ -21,8 +21,8 @@
             <scroll-view class="scroll-view" :scroll-left="scrollLeft" scroll-x scroll-with-animation>
                 <view class="tab-box">
                     <view class="tab-item tabitem" :id="item.classname + item.sa_fadclassid"
-                        :class="item.sa_fadclassid == sa_fadclassid ? 'tab-item-active' : ''" v-for="item in tabs"
-                        :key="item.sa_fadclassid" @click="changeActive(item.sa_fadclassid)">
+                        :class="item.sa_fadclassid == sa_fadclassid ? 'tab-item-active' : ''" v-for="(item, index) in tabs"
+                        :key="item.sa_fadclassid" @click="changeActive(item.sa_fadclassid, index)">
                         {{ item.classname }}
                     </view>
                 </view>
@@ -48,7 +48,6 @@
                 </view>
             </My_listbox>
         </view>
-
     </view>
 </template>
 
@@ -61,6 +60,7 @@ export default {
             types: [],
             tabs: [],
             condition: "",
+            scrollLeft: 0,
             "content": {
                 "where": {
                     "condition": "",
@@ -74,7 +74,8 @@ export default {
             sa_fadclassid: '',
             total: 0,
             searchShowAntiShake: null,
-            list: []
+            list: [],
+            widths: [0],
         }
     },
     created() {
@@ -140,10 +141,22 @@ export default {
             if (e.children.length && e.children[0].classname != '全部') e.children.unshift(all)
             this.tabs = e.children;
             this.active = '全部'
+            this.widths = [0];
+            this.scrollLeft = 0;
+            setTimeout(() => {
+                uni.createSelectorQuery().in(this).selectAll(`.tabitem`).boundingClientRect(list => {
+                    let count = 0;
+                    list.forEach((v, i) => {
+                        if (i) this.widths.push(count)
+                        count += v.right;
+                    })
+                }).exec();
+            }, 100);
             this.$refs.List.setHeight();
             this.getList(true)
         },
-        changeActive(sa_fadclassid) {
+        changeActive(sa_fadclassid, index) {
+            this.scrollLeft = this.widths[index]
             if (this.sa_fadclassid == sa_fadclassid) return;
             this.sa_fadclassid = sa_fadclassid
             this.getList(true)

pages/index/index.vue

@@ -4,6 +4,7 @@
 		<my-case ref="案例" v-show="page == '案例'" />
 		<dataBank ref="资料库" v-show="page == '资料库'" />
 		<school ref="商学院" v-show="page == '商学院'" />
+		<product ref="单品" v-show="page == '单品'" />
 
 		<bottom-suspension-frame ref="pages" @onChange="pageChange" />
 	</view>
@@ -14,14 +15,15 @@ import index from './index/index.vue'
 import myCase from './index/myCase.vue'
 import dataBank from './cloud/dataBank.vue'
 import school from './cloud/school.vue'
+import product from './cloud/product.vue'
 
 import bottomSuspensionFrame from "./modules/bottomSuspensionFrame.vue";
 export default {
-	components: { bottomSuspensionFrame, index, myCase, dataBank, school },
+	components: { bottomSuspensionFrame, index, myCase, dataBank, school, product },
 	data() {
 		return {
-			swiperItemID: 'index',
-			page: '案例'
+			swiperItemID: 'cloud',
+			page: '单品'
 		}
 	},
 	onShow() {

pages/index/index/casePages/imgs.vue

@@ -62,6 +62,7 @@ export default {
                 }).then(res => {
                     resolve()
                     this.$refs.List.RefreshToComplete()
+                    this.$refs.List.setHeight()
                     console.log("获取效果图列表", res)
                     if (this.cutoff(res.msg)) return;
                     this.isInitialize = true;
@@ -82,6 +83,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page,
+body {
+    height: 100vh;
+    overflow: hidden;
+}
+
 .tab-item {
     flex-shrink: 0;
     height: 24px;