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 @@ ...@@ -5,7 +5,9 @@
"path": "pages/home/index", "path": "pages/home/index",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTextStyle":"white" "navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"onReachBottomDistance": 45
} }
}, },
{ {
......
pages/goods/detail.vue
View file @ 98f2b622
<template> <template>
<scroll-view <view
class="wrapper w-100" class="wrapper w-100"
scroll-y
@scroll="scrolling"
> >
<c-nav_bar <c-nav_bar
...@@ -151,7 +149,7 @@ ...@@ -151,7 +149,7 @@
<!-- 购物弹窗 --> <!-- 购物弹窗 -->
<goods-popup ref="popup" /> <goods-popup ref="popup" />
</scroll-view> </view>
</template> </template>
<script> <script>
...@@ -231,11 +229,13 @@ export default { ...@@ -231,11 +229,13 @@ export default {
image: goods_thumb ? `${this.baseUrl}/${goods_thumb}` : '' 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: { methods: {
scrolling: throttle(function(e) {
const opacity = (e.detail.scrollTop / 375).toFixed(1)
this.navBg = `rgba(255, 255, 255, ${opacity})`
}, 300),
// 富文本预览事件 // 富文本预览事件
preview(src, e) { preview(src, e) {
// do something // do something
...@@ -337,7 +337,6 @@ export default { ...@@ -337,7 +337,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("/components/parse/parse.css"); @import url("/components/parse/parse.css");
.wrapper { .wrapper {
height: 100vh;
margin-bottom: 98rpx; margin-bottom: 98rpx;
.swiper-wrap { .swiper-wrap {
position: relative; position: relative;
......
pages/home/index.js
View file @ 98f2b622
...@@ -50,34 +50,9 @@ function checkShowAll(Obj) { ...@@ -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 { export default {
searchData, searchData,
getHomeCate, getHomeCate,
checkShowAll, checkShowAll
scrolltolower,
refresherrefresh
} }
\ No newline at end of file
pages/home/index.vue
View file @ 98f2b622
<template> <template>
<view> <view>
<!-- 顶部图片 -->
<c-nav_bar <image class="top-bg" src="/static/images/common/home-bg.png" mode="widthFix"></image>
:color="navColor"
:title="storeInfo.shop_name" <!-- 导航栏 -->
:bg="navBg" <c-nav_bar
:color="navColor"
:title="storeInfo.shop_name"
:bg="navBg"
/> />
<scroll-view <view :style="{height: systemInfo.menuButtonInfo.bottom + 15 + 'px'}"></view>
style="height:100vh" <!-- 店铺信息 -->
scroll-y <view class="store-wrap">
@scroll="scrolling" <navigator
@scrolltolower="scrolltolower" url="/subPages/storeInfo/index"
refresher-enabled hover-class="none"
:refresher-triggered="refresherTriggered" class="storeInfo-wrap w-100 flex j-start a-center"
@refresherrefresh="refresherrefresh" >
> <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="w-100">
<!-- 店铺信息 --> <view class="menu pb-3 mb-1 w-100 flex j-around a-center flex-nowrap">
<view class="store-wrap"> <view
<navigator class="flex-1 font-24 flex-column flex j-center a-center"
url="/subPages/storeInfo/index" @click="handleMenu('contact')"
hover-class="none" >
class="storeInfo-wrap w-100 flex j-start a-center" <image
> class="menu-icon"
<view class="logo"> src="../../static/images/common/icon-call.png"
<image mode="aspectFit"
v-if="storeInfo.shop_img"
class="img"
:src="baseUrl + '/' + storeInfo.shop_img"
mode="aspectFit"
/> />
<view>联系老板</view>
</view> </view>
<view class="introduct flex-1 ml-3"> <view
<view class="shop-name mb-2">{{storeInfo.shop_name || ''}}</view> class="flex-1 font-24 flex-column flex j-center a-center"
@click="handleMenu('collect')"
<view class="intro-deatil font-24">简介: {{storeInfo.shop_intro || ''}}</view> >
<image
class="menu-icon"
src="../../static/images/common/icon-collect.png"
mode="aspectFit"
/>
<view>收藏历史</view>
</view> </view>
</navigator> <view
class="flex-1 font-24 flex-column flex j-center a-center"
<view class="w-100"> @click="handleMenu('order')"
<view class="menu pb-3 mb-1 w-100 flex j-around a-center flex-nowrap"> >
<view <image
class="flex-1 font-24 flex-column flex j-center a-center" class="menu-icon"
@click="handleMenu('contact')" src="../../static/images/common/icon-order.png"
> mode="aspectFit"
<image />
class="menu-icon" <view>我的订单</view>
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> </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>
</view> </view>
</view>
<!-- content -->
<template v-if="isOverdue"> <!-- content -->
<over-due /> <template v-if="isOverdue">
</template> <over-due />
<template v-else> </template>
<!-- search bar --> <template v-else>
<search-bar bg="#f8f8f8" innerBg="#fff" /> <!-- 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"> <view class="w-100 content-wrap">
<empty-view <block v-if="!cate_data.xplist.length && !cate_data.cxlist.length && !cate_data.bklist.length && !searchList.length">
iconSrc="/static/images/common/noGoods.png" <empty-view
text="店铺尚未上架商品" 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>
<!-- 综合商品 --> <goods-module
<template v-if="searchList.length > 0"> v-if="cate_data.cxlist.length > 0"
<view class="w-100"> title="热销商品"
<view class="list-wrap w-100 flex j-start a-center flex-wrap"> :list="cate_data.cxlist"
<block @purchase="purchase"
v-for="(item, index) in searchList" />
:key="index"
<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 <image
class="list-item mb-3 ml-3" lazy-load
hover-class="none" class="goods_cover w-100"
v-for="good in item" :src="baseUrl + '/' + good.goods_thumb"
:key="good.goods_id" mode="aspectFit"
:url="'/pages/goods/detail?goods_id=' + good.goods_id" />
> <view class="goods-info flex flex-column j-between">
<image <view class="title font-28 my-1">{{good.goods_name}}</view>
lazy-load <view class="flex j-between a-center mt-1 mb-2">
class="goods_cover w-100" <price
:src="baseUrl + '/' + good.goods_thumb" :is_inquiry="good.is_inquiry"
mode="aspectFit" :price="good.shop_price"
/> />
<view class="goods-info flex flex-column j-between"> <image
<view class="title font-28 my-1">{{good.goods_name}}</view> class="cart-btn"
<view class="flex j-between a-center mt-1 mb-2"> @click.stop="handlePop(good)"
<price src="/static/images/common/icon-cart.png"
:is_inquiry="good.is_inquiry" mode="aspectFit"
:price="good.shop_price" />
/>
<image
class="cart-btn"
@click.stop="handlePop(good)"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
/>
</view>
</view> </view>
</navigator> </view>
</block> </navigator>
</view> </block>
</view> </view>
</template> </view>
</block> </template>
</block>
</view>
</template> </view>
</template>
</scroll-view>
<!-- 购物弹窗 --> <!-- 购物弹窗 -->
<goods-popup ref="popup" /> <goods-popup ref="popup" />
<button type="default" open-type="share" id="share"></button> <button type="default" open-type="share" id="share"></button>
...@@ -210,7 +200,6 @@ export default { ...@@ -210,7 +200,6 @@ export default {
searchList: [], searchList: [],
navBg: "rgba(255, 255, 255, 0)", navBg: "rgba(255, 255, 255, 0)",
navColor: '#fff', navColor: '#fff',
refresherTriggered: false
} }
}, },
...@@ -281,41 +270,50 @@ export default { ...@@ -281,41 +270,50 @@ export default {
uni.hideLoading() uni.hideLoading()
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, 800) }, 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() { onShareAppMessage() {
return { return {
title: this.storeInfo.shop_name || '' 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: { methods: {
...mapActions('cart', ['setCount']), ...mapActions('cart', ['setCount']),
...mapActions('user', ['getStoreInfo']), ...mapActions('user', ['getStoreInfo']),
...indexModule, ...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) { purchase(e) {
this.$refs.popup.show(e) this.$refs.popup.show(e)
}, },
......
readme.md
View file @ 98f2b622
...@@ -28,17 +28,8 @@ ...@@ -28,17 +28,8 @@
#### warning #### warning
+ 2021/6/29，本日起的代码可能会引起不适，but all can run（效率和质量不会成正比关系） + 2021/6/29，本日起的代码可能会引起不适，but all can run（效率和质量不会成正比关系）
#### 未完成
+ 支付
+ 订单管理
+ 订单详情
+ 精度处理
#### unFinish, but not important #### unFinish, but not important
+ 自定义的导航栏的样式计算可以在vuex中处理（wxs计算） + 自定义的导航栏的样式计算可以在vuex中处理（wxs计算）
+ 详情有个深拷贝的问题。暂时通过JSON.stringify()处理 + 详情有个深拷贝的问题。暂时通过JSON.stringify()处理
+ 所有的价格都是通过toFixed会可能出现精度问题。一般发现不了 + 所有的价格都是通过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