全新UI视觉体验,移动端API优化降低重复调用,提高并发6倍,修复N多Bug
This commit is contained in:
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<view class='productSort copy-data'>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="sys-head" :style="{height:sysHeight}"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class='productSort'>
|
||||
<view class='header acea-row row-center-wrapper'>
|
||||
<view class='acea-row row-between-wrapper input'>
|
||||
<text class='iconfont icon-sousuo'></text>
|
||||
@@ -11,15 +7,18 @@
|
||||
placeholder-class='placeholder'></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class='aside'>
|
||||
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
|
||||
<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
|
||||
<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
|
||||
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
|
||||
:key="index" @click='tap(index,"b"+index)'><text>{{item.name}}</text></view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
<view class='conter'>
|
||||
<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;"' @scroll="scroll"
|
||||
<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"' @scroll="scroll"
|
||||
scroll-with-animation='true'>
|
||||
<block v-for="(item,index) in productList" :key="index">
|
||||
|
||||
|
||||
<view class='listw' :id="'b'+index">
|
||||
<view class='title acea-row row-center-wrapper'>
|
||||
<view class='line'></view>
|
||||
@@ -29,10 +28,7 @@
|
||||
<view class='list acea-row'>
|
||||
<block v-for="(itemn,indexn) in item.child" :key="indexn">
|
||||
<navigator hover-class='none' :url='"/pages/goods_list/index?cid="+itemn.id+"&title="+itemn.name' class='item acea-row row-column row-middle'>
|
||||
<!-- <view class='picture' :style="{'background-color':(itemn.extra&&itemn.extra.indexOf('https://') > -1) || (itemn.extra&&itemn.extra.indexOf('http://') > -1)?'none':'#f7f7f7'}">
|
||||
<image :src='itemn.extra'></image>
|
||||
</view> -->
|
||||
<view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
|
||||
<view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
|
||||
<image :src='itemn.extra'></image>
|
||||
</view>
|
||||
<view class='name line1'>{{itemn.name}}</view>
|
||||
@@ -48,7 +44,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
import {
|
||||
getCategoryList
|
||||
} from '@/api/store.js';
|
||||
@@ -63,25 +58,25 @@
|
||||
height: 0,
|
||||
hightArr: [],
|
||||
toView: "",
|
||||
tabbarH: 0,
|
||||
sysHeight: sysHeight,
|
||||
tabbarH: 0
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.getAllCategory();
|
||||
},
|
||||
onShow() {},
|
||||
onShow(){
|
||||
},
|
||||
methods: {
|
||||
infoScroll: function() {
|
||||
let that = this;
|
||||
let len = that.productList.length;
|
||||
let child = that.productList[len - 1] && that.productList[len - 1].child ? that.productList[len - 1].child : [];
|
||||
this.number = child ? child.length : 0;
|
||||
|
||||
let child = that.productList[len - 1]&&that.productList[len - 1].child?that.productList[len - 1].child:[];
|
||||
this.number = child?child.length:0;
|
||||
|
||||
//设置商品列表高度
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.height = (res.windowHeight) * (750 / res.windowWidth);
|
||||
that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
|
||||
},
|
||||
});
|
||||
let height = 0;
|
||||
@@ -106,9 +101,9 @@
|
||||
let that = this;
|
||||
getCategoryList().then(res => {
|
||||
that.productList = res.data;
|
||||
setTimeout(function() {
|
||||
setTimeout(function(){
|
||||
that.infoScroll();
|
||||
}, 500)
|
||||
},500)
|
||||
})
|
||||
},
|
||||
scroll: function(e) {
|
||||
@@ -139,9 +134,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sys-head{
|
||||
background-color: #fff;
|
||||
}
|
||||
.productSort .header {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
@@ -153,7 +145,7 @@
|
||||
z-index: 9;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
.productSort .header .input {
|
||||
width: 700rpx;
|
||||
height: 60rpx;
|
||||
@@ -162,45 +154,42 @@
|
||||
box-sizing: border-box;
|
||||
padding: 0 25rpx;
|
||||
}
|
||||
|
||||
|
||||
.productSort .header .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
.productSort .header .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
.productSort .header .input input {
|
||||
font-size: 26rpx;
|
||||
height: 100%;
|
||||
width: 597rpx;
|
||||
}
|
||||
|
||||
|
||||
.productSort .aside {
|
||||
position: fixed;
|
||||
width: 24%;
|
||||
width: 180rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top:0;
|
||||
background-color: #f7f7f7;
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
height: auto;
|
||||
margin-top: 96rpx;
|
||||
/* 兼容 IOS<11.2 */
|
||||
bottom: calc(100rpx+ constant(safe-area-inset-bottom));
|
||||
/* 兼容 IOS>11.2 */
|
||||
bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
|
||||
.productSort .aside .item {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
|
||||
.productSort .aside .item.on {
|
||||
background-color: #fff;
|
||||
border-left: 4rpx solid #fc4141;
|
||||
@@ -209,55 +198,58 @@
|
||||
color: #fc4141;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter {
|
||||
margin: 96rpx 0 0 180rpx;
|
||||
padding: 0 14rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .listw {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .listw .title {
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .listw .title .line {
|
||||
width: 100rpx;
|
||||
height: 2rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .listw .title .name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin: 0 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .list .item {
|
||||
width: 177rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .list .item .picture {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .list .item .picture image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
div{
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.productSort .conter .list .item .name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
Reference in New Issue
Block a user