Skip to content

S
singleStore
Commit 98f2b622 authored by June's avatar June
Browse files
Options

优化滚动监听。

parent 77f88714
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 237 deletions
pages.json
View file @ 98f2b622
......@@ -5,7 +5,9 @@
"path": "pages/home/index",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle":"white"
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"onReachBottomDistance": 45
}
},
{
......
pages/goods/detail.vue
View file @ 98f2b622
<template>
<scroll-view
<view
class="wrapper w-100"
scroll-y
@scroll="scrolling"
>
<c-nav_bar
......@@ -151,7 +149,7 @@
<!-- 购物弹窗 -->
<goods-popup ref="popup" />
</scroll-view>
</view>
</template>
<script>
......@@ -231,11 +229,13 @@ export default {
image: goods_thumb ? `${this.baseUrl}/${goods_thumb}` : ''
}
},
onPageScroll: throttle(function(e) {
const scrollTop = e.scrollTop
if(scrollTop > 400) return
const opacity = (scrollTop / 375).toFixed(1)
this.navBg = `rgba(255, 255, 255, ${opacity})`
}, 300),
methods: {
scrolling: throttle(function(e) {
const opacity = (e.detail.scrollTop / 375).toFixed(1)
this.navBg = `rgba(255, 255, 255, ${opacity})`
}, 300),
// 富文本预览事件
preview(src, e) {
// do something
......@@ -337,7 +337,6 @@ export default {
<style lang="scss" scoped>
@import url("/components/parse/parse.css");
.wrapper {
height: 100vh;
margin-bottom: 98rpx;
.swiper-wrap {
position: relative;
......
pages/home/index.js
View file @ 98f2b622
......@@ -50,34 +50,9 @@ function checkShowAll(Obj) {
}
}
// 上拉加载更多
function scrolltolower() {
console.log('触底')
const cate_data = this.cate_data
if(this.checkShowAll(cate_data)) {
console.log('pass')
this.searchData()
}
}
function refresherrefresh() {
uni.showLoading({
title: '加载中...'
})
this.refresherTriggered = true
this.getStoreInfo()
this.getHomeCate()
let timer = setTimeout(() => {
this.refresherTriggered = false
uni.hideLoading()
timer = null
},500)
}
export default {
searchData,
getHomeCate,
checkShowAll,
scrolltolower,
refresherrefresh
checkShowAll
}
\ No newline at end of file
pages/home/index.vue
View file @ 98f2b622
<template>
<view>
<c-nav_bar
:color="navColor"
:title="storeInfo.shop_name"
:bg="navBg"
<!-- 顶部图片 -->
<image class="top-bg" src="/static/images/common/home-bg.png" mode="widthFix"></image>
<!-- 导航栏 -->
<c-nav_bar
:color="navColor"
:title="storeInfo.shop_name"
:bg="navBg"
/>
<scroll-view
style="height:100vh"
scroll-y
@scroll="scrolling"
@scrolltolower="scrolltolower"
refresher-enabled
:refresher-triggered="refresherTriggered"
@refresherrefresh="refresherrefresh"
>
<view :style="{height: systemInfo.menuButtonInfo.bottom + 15 + 'px'}"></view>
<!-- 店铺信息 -->
<view class="store-wrap">
<navigator
url="/subPages/storeInfo/index"
hover-class="none"
class="storeInfo-wrap w-100 flex j-start a-center"
>
<view class="logo">
<image
v-if="storeInfo.shop_img"
class="img"
:src="baseUrl + '/' + storeInfo.shop_img"
mode="aspectFit"
/>
</view>
<view class="introduct flex-1 ml-3">
<view class="shop-name mb-2">{{storeInfo.shop_name || ''}}</view>
<image class="top-bg" src="/static/images/common/home-bg.png" mode="widthFix"></image>
<view class="intro-deatil font-24">简介: {{storeInfo.shop_intro || ''}}</view>
</view>
</navigator>
<view :style="{height: systemInfo.menuButtonInfo.bottom + 15 + 'px'}"></view>
<!-- 店铺信息 -->
<view class="store-wrap">
<navigator
url="/subPages/storeInfo/index"
hover-class="none"
class="storeInfo-wrap w-100 flex j-start a-center"
>
<view class="logo">
<image
v-if="storeInfo.shop_img"
class="img"
:src="baseUrl + '/' + storeInfo.shop_img"
mode="aspectFit"
<view class="w-100">
<view class="menu pb-3 mb-1 w-100 flex j-around a-center flex-nowrap">
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('contact')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-call.png"
mode="aspectFit"
/>
<view>联系老板</view>
</view>
<view class="introduct flex-1 ml-3">
<view class="shop-name mb-2">{{storeInfo.shop_name || ''}}</view>
<view class="intro-deatil font-24">简介: {{storeInfo.shop_intro || ''}}</view>
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('collect')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-collect.png"
mode="aspectFit"
/>
<view>收藏历史</view>
</view>
</navigator>
<view class="w-100">
<view class="menu pb-3 mb-1 w-100 flex j-around a-center flex-nowrap">
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('contact')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-call.png"
mode="aspectFit"
/>
<view>联系老板</view>
</view>
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('collect')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-collect.png"
mode="aspectFit"
/>
<view>收藏历史</view>
</view>
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('order')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-order.png"
mode="aspectFit"
/>
<view>我的订单</view>
</view>
<label
class="flex-1 font-24 flex-column flex j-center a-center"
for="share"
>
<image
class="menu-icon"
src="../../static/images/common/icon-share.png"
mode="aspectFit"
/>
<view>分享</view>
</label>
<view
class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('order')"
>
<image
class="menu-icon"
src="../../static/images/common/icon-order.png"
mode="aspectFit"
/>
<view>我的订单</view>
</view>
<label
class="flex-1 font-24 flex-column flex j-center a-center"
for="share"
>
<image
class="menu-icon"
src="../../static/images/common/icon-share.png"
mode="aspectFit"
/>
<view>分享</view>
</label>
</view>
</view>
<!-- content -->
<template v-if="isOverdue">
<over-due />
</template>
<template v-else>
<!-- search bar -->
<search-bar bg="#f8f8f8" innerBg="#fff" />
<view class="w-100 content-wrap">
<block v-if="!cate_data.xplist.length && !cate_data.cxlist.length && !cate_data.bklist.length && !searchList.length">
<empty-view
iconSrc="/static/images/common/noGoods.png"
text="店铺尚未上架商品"
</view>
<!-- content -->
<template v-if="isOverdue">
<over-due />
</template>
<template v-else>
<!-- search bar -->
<search-bar bg="#f8f8f8" innerBg="#fff" />
<view class="w-100 content-wrap">
<block v-if="!cate_data.xplist.length && !cate_data.cxlist.length && !cate_data.bklist.length && !searchList.length">
<empty-view
iconSrc="/static/images/common/noGoods.png"
text="店铺尚未上架商品"
/>
</block>
<block v-else>
<template v-if="cate_data">
<goods-module
v-if="cate_data.xplist.length > 0"
title="新品推荐"
:list="cate_data.xplist"
@purchase="purchase"
/>
</block>
<block v-else>
<template v-if="cate_data">
<goods-module
v-if="cate_data.xplist.length > 0"
title="新品推荐"
:list="cate_data.xplist"
@purchase="purchase"
/>
<goods-module
v-if="cate_data.cxlist.length > 0"
title="热销商品"
:list="cate_data.cxlist"
@purchase="purchase"
/>
<goods-module
v-if="cate_data.bklist.length > 0"
title="爆款商品"
:list="cate_data.bklist"
@purchase="purchase"
/>
</template>
<!-- 综合商品 -->
<template v-if="searchList.length > 0">
<view class="w-100">
<view class="list-wrap w-100 flex j-start a-center flex-wrap">
<block
v-for="(item, index) in searchList"
:key="index"
<goods-module
v-if="cate_data.cxlist.length > 0"
title="热销商品"
:list="cate_data.cxlist"
@purchase="purchase"
/>
<goods-module
v-if="cate_data.bklist.length > 0"
title="爆款商品"
:list="cate_data.bklist"
@purchase="purchase"
/>
</template>
<!-- 综合商品 -->
<template v-if="searchList.length > 0">
<view class="w-100">
<view class="list-wrap w-100 flex j-start a-center flex-wrap">
<block
v-for="(item, index) in searchList"
:key="index"
>
<navigator
class="list-item mb-3 ml-3"
hover-class="none"
v-for="good in item"
:key="good.goods_id"
:url="'/pages/goods/detail?goods_id=' + good.goods_id"
>
<navigator
class="list-item mb-3 ml-3"
hover-class="none"
v-for="good in item"
:key="good.goods_id"
:url="'/pages/goods/detail?goods_id=' + good.goods_id"
>
<image
lazy-load
class="goods_cover w-100"
:src="baseUrl + '/' + good.goods_thumb"
mode="aspectFit"
/>
<view class="goods-info flex flex-column j-between">
<view class="title font-28 my-1">{{good.goods_name}}</view>
<view class="flex j-between a-center mt-1 mb-2">
<price
:is_inquiry="good.is_inquiry"
:price="good.shop_price"
/>
<image
class="cart-btn"
@click.stop="handlePop(good)"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
/>
</view>
<image
lazy-load
class="goods_cover w-100"
:src="baseUrl + '/' + good.goods_thumb"
mode="aspectFit"
/>
<view class="goods-info flex flex-column j-between">
<view class="title font-28 my-1">{{good.goods_name}}</view>
<view class="flex j-between a-center mt-1 mb-2">
<price
:is_inquiry="good.is_inquiry"
:price="good.shop_price"
/>
<image
class="cart-btn"
@click.stop="handlePop(good)"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
/>
</view>
</navigator>
</block>
</view>
</view>
</navigator>
</block>
</view>
</template>
</block>
</view>
</template>
</scroll-view>
</view>
</template>
</block>
</view>
</template>
<!-- 购物弹窗 -->
<goods-popup ref="popup" />
<button type="default" open-type="share" id="share"></button>
......@@ -210,7 +200,6 @@ export default {
searchList: [],
navBg: "rgba(255, 255, 255, 0)",
navColor: '#fff',
refresherTriggered: false
}
},
......@@ -281,41 +270,50 @@ export default {
uni.hideLoading()
uni.stopPullDownRefresh()
}, 800)
},
},
onPageScroll: throttle(function(e) {
const scrollTop = e.scrollTop
if(scrollTop > 100) {
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff',
animation: true
})
this.navColor = '#333'
this.navBg = 'rgba(255, 255, 255, 1)'
} else {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
animation: true,
fail: e=> console.log(e)
})
this.navColor = '#fff'
this.navBg = 'rgba(255, 255, 255, 0)'
}
}, 300),
onShareAppMessage() {
return {
title: this.storeInfo.shop_name || ''
}
},
},
onReachBottom() {
console.log('触底')
const cate_data = this.cate_data
if(this.checkShowAll(cate_data)) {
console.log('pass')
this.searchData()
}
},
methods: {
...mapActions('cart', ['setCount']),
...mapActions('user', ['getStoreInfo']),
...indexModule,
scrolling: throttle(function(e) {
const scrollTop = e.detail.scrollTop
if(scrollTop > 100) {
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff',
animation: true
})
this.navColor = '#333'
this.navBg = 'rgba(255, 255, 255, 1)'
} else {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
animation: true,
fail: e=> console.log(e)
})
this.navColor = '#fff'
this.navBg = 'rgba(255, 255, 255, 0)'
}
}, 300),
purchase(e) {
this.$refs.popup.show(e)
},
......
readme.md
View file @ 98f2b622
......@@ -28,17 +28,8 @@
#### warning
+ 2021/6/29，本日起的代码可能会引起不适，but all can run（效率和质量不会成正比关系）
#### 未完成
+ 支付
+ 订单管理
+ 订单详情
+ 精度处理
#### unFinish, but not important
+ 自定义的导航栏的样式计算可以在vuex中处理（wxs计算）
+ 详情有个深拷贝的问题。暂时通过JSON.stringify()处理
+ 所有的价格都是通过toFixed会可能出现精度问题。一般发现不了
+ 确认订单页面要跳到地址列表页面选择
签收退款 + 退款成功状态显示
\ No newline at end of file
+ 确认订单页面要跳到地址列表页面选择
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment