刘文博 / gulu-vue

Download as
Browse Code »

Commit 93e6a26508abe0226b9c435225e0e6bae99b4e8d

Authored by 喻鹏
1 parent fa7712dcc0
Exists in master

首页懒加载

Showing 6 changed files with 201 additions and 30 deletions   Show diff stats
src/components/EasyLoadimage/EasyLoadimage.vue
Diff comments   View file @93e6a26
... ... @@ -0,0 +1,170 @@
  1 +<template>
  2 + <view class="easy-loadimage" :id="uid">
  3 + <image class="origin-img" :src="imageSrc?imageSrc:defaultImg" :mode="mode"
  4 + v-if="loadImg&&!isLoadError"
  5 + v-show="showImg"
  6 + :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
  7 + @load="handleImgLoad"
  8 + @error="handleImgError">
  9 + </image>
  10 + <view class="loadfail-img" v-else-if="isLoadError"></view>
  11 + <view :class="['loading-img',loadingMode]" v-show="!showImg&&!isLoadError"></view>
  12 +
  13 + </view>
  14 +</template>
  15 +<script>
  16 +// 生成全局唯一id
  17 +function generateUUID() {
  18 +    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  19 +        let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
  20 +        return v.toString(16);
  21 +    })
  22 +}
  23 +export default{
  24 + props:{
  25 + imageSrc:{
  26 + type: String,
  27 + },
  28 + mode:{
  29 + type: String,
  30 + },
  31 + scrollTop:{
  32 + type: Number,
  33 + },
  34 + loadingMode:{
  35 + type: String,
  36 + default:'looming-gray'
  37 + },
  38 + openTransition:{
  39 + type: Boolean,
  40 + default:true,
  41 + },
  42 + viewHeight:{
  43 + type:Number,
  44 + default() {
  45 + return uni.getSystemInfoSync().windowHeight;
  46 + }
  47 + }
  48 + },
  49 + watch:{
  50 + scrollTop(val){
  51 + this.onScroll(val)
  52 + }
  53 + },
  54 + data(){
  55 + return {
  56 + uid:'',
  57 + loadImg:false,
  58 + showImg:false,
  59 + isLoadError:false,
  60 + showTransition:false
  61 + }
  62 + },
  63 + methods:{
  64 + init(){
  65 + this.uid = 'uid-' + generateUUID();
  66 + this.$nextTick(this.onScroll)
  67 + },
  68 + handleImgLoad(e){
  69 + // console.log('success');
  70 + this.showImg = true;
  71 + // this.$nextTick(function(){
  72 + // this.showTransition = true
  73 + // })
  74 + setTimeout(()=>{
  75 + this.showTransition = true
  76 + },50)
  77 + },
  78 + handleImgError(e){
  79 + // console.log('fail');
  80 + this.isLoadError = true;
  81 + },
  82 + onScroll(scrollTop){
  83 + // 加载ing时才执行滚动监听判断是否可加载
  84 + if(this.loadImg || this.isLoadError) return;
  85 + const id = this.uid
  86 + const query = uni.createSelectorQuery().in(this);
  87 + query.select('#'+id).boundingClientRect(data => {
  88 + if(!data) return;
  89 + if(data.top - this.viewHeight<0){
  90 + this.loadImg = true;
  91 + }
  92 + }).exec()
  93 + },
  94 + },
  95 + mounted() {
  96 + this.init()
  97 + }
  98 +}
  99 +</script>
  100 +
  101 +<style scoped>
  102 + /* 官方优化图片tips */
  103 + image{
  104 + will-change: transform
  105 + }
  106 + /* 渐变过渡效果处理 */
  107 + image.origin-img{
  108 + width: 100%;
  109 + height: 100%;
  110 + opacity: 0.3;
  111 + }
  112 + image.origin-img.show-transition{
  113 + transition: opacity 1.2s;
  114 + opacity: 1;
  115 + }
  116 + image.origin-img.no-transition{
  117 + opacity: 1;
  118 + }
  119 + /* 加载失败、加载中的占位图样式控制 */
  120 + .loadfail-img{
  121 + height: 100%;
  122 + background: url('~@/static/easy-loadimage/loadfail.png') no-repeat center;
  123 + background-size: 50%;
  124 + }
  125 + .loading-img{
  126 + height: 100%;
  127 + }
  128 + /* 转圈 */
  129 + .spin-circle{
  130 + background: url('~@/static/easy-loadimage/loading.gif') no-repeat center;
  131 + background-size: 100rpx;
  132 + }
  133 + /* 动态灰色若隐若现 */
  134 + .looming-gray{
  135 + animation: looming-gray 1s infinite linear;
  136 + background-color: #e3e3e3;
  137 + }
  138 + @keyframes looming-gray{
  139 + 0% {background-color:#e3e3e3aa;}
  140 + 50% {background-color:#e3e3e3;}
  141 + 100% {background-color:#e3e3e3aa;}
  142 + }
  143 + /* 骨架屏1 */
  144 + .skeleton-1{
  145 + background-color: #e3e3e3;
  146 + background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
  147 + background-size: 100rpx 100%;
  148 + background-repeat: repeat-y;
  149 + background-position:0 0;
  150 + animation: skeleton-1 .6s infinite;
  151 + }
  152 + @keyframes skeleton-1 {
  153 + to {
  154 + background-position: 200% 0;
  155 + }
  156 + }
  157 + /* 骨架屏2 */
  158 + .skeleton-2{
  159 + background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%,#fefefe 100%);
  160 + background-size: 400% 400%;
  161 + background-position:0 0;
  162 + animation: skeleton-2 1.2s ease-in-out infinite;
  163 + }
  164 + @keyframes skeleton-2{
  165 + to {
  166 + background-position: -135% 0;
  167 + }
  168 + }
  169 +</style>
  170 +
... ...
src/pages/cart/cart.vue
Diff comments   View file @93e6a26
... ... @@ -8,7 +8,7 @@
8 8 <view class="cardHeader">
9 9 <view
10 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11   - @tap="pChange(pIsoPen)"
  11 + @touchstart="pChange(pIsoPen)"
12 12 >
13 13 <span class="correct"></span>
14 14 </view>
... ... @@ -21,12 +21,12 @@
21 21 <view
22 22 class="cardBody"
23 23 v-for="(item,index) in cartList"
24   - :key="item.cart_id"
  24 + :key="index"
25 25 @longpress="delCart(item.cart_id,index)"
26 26 >
27 27 <view
28 28 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29   - @tap="Change(childIsOpen[index],index)"
  29 + @touchstart="Change(childIsOpen[index],index)"
30 30 >
31 31 <span class="correct"></span>
32 32 </view>
... ... @@ -47,11 +47,10 @@
47 47 @tap="toGoods(item.pid,item.sk_id)"
48 48 >{{item.p_name}}</view>
49 49 <!-- <view class="describ"> -->
50   - <uni-collapse accordion="true">
  50 + <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;">
51 51 <uni-collapse-item
52 52 showAnimation='true'
53   - :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'"
54   - >
  53 + :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'">
55 54 <text class="describ">
56 55 <block
57 56 v-for="tag in item.tag.prod_tag_fun"
... ... @@ -127,6 +126,7 @@ export default {
127 126  
128 127 cartList() {
129 128 // console.log('cart-list', this.$store.state.cart.cartList);
  129 + this.totalPrice=0
130 130 return this.$store.state.cart.cartList
131 131 },
132 132 childIsOpen() {
... ... @@ -268,24 +268,24 @@ export default {
268 268 // console.log('delcart------>cart_id',cart_id)
269 269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
270 270 // console.log('delcart======>index',index)
271   - const uid = this.$store.state.user.userInfo.uid
272   - const openid = this.$store.state.user.userInfo.openid
273   - uni.showModal({
274   - title: '是否删除该商品',
275   - // content: '是否删除该商品',
276   - success: function (res) {
277   - if (res.confirm) {
278   - // this.$store.state.cart.cartList.splice(index,1)
279   - store.dispatch('cart/delCart', {
280   - uid: uid,
281   - openid: openid,
282   - cart_id: cart_id, // 要修改的购物车id
283   - arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
284   - })
285   - console.log('用户点击确定')
286   - }
287   - },
288   - })
  271 + uni.showModal({
  272 + title: '是否删除该商品',
  273 + // content: '是否删除该商品',
  274 + success: function (res) {
  275 + if (res.confirm) {
  276 + if (this.childIsOpen[index]) {
  277 + this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
  278 + }
  279 + console.log('index===>',index)
  280 + store.dispatch('cart/delCart', {
  281 + uid: this.$store.state.user.userInfo.uid,
  282 + openid: this.$store.state.user.userInfo.openid,
  283 + cart_id: cart_id, // 要修改的购物车id
  284 + arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
  285 + })
  286 + }
  287 + }.bind(this),
  288 + })
289 289 },
290 290 },
291 291 }
... ... @@ -308,14 +308,14 @@ export default {
308 308 border-radius: 22px;
309 309 border: 1px solid #cfcfcf;
310 310 background-color: #ffffff;
311   - margin: 6px;
  311 + margin: 24rpx 12rpx 24rpx 24rpx;
312 312 }
313 313 .partentChecked {
314 314 width: 18px;
315 315 height: 18px;
316 316 border-radius: 22px;
317 317 background-color: #ff6b4a;
318   - margin: 6px;
  318 + margin: 24rpx 12rpx 24rpx 24rpx;
319 319 .correct {
320 320 display: inline-block;
321 321 position: relative;
... ...
src/static/easy-loadimage/loadfail.png
Diff comments   View file @93e6a26

3.42 KB
src/static/easy-loadimage/loading.gif
Diff comments   View file @93e6a26

16.9 KB
src/store/modules/index.js
Diff comments   View file @93e6a26
... ... @@ -9,7 +9,7 @@
9 9  
10 10 const state = {
11 11 categoryList: [],
12   - list: [],
  12 + list: []
13 13 };
14 14  
15 15 const mutations = {
... ... @@ -18,7 +18,7 @@ const mutations = {
18 18 },
19 19 CATEGORY: (state, categoryList) => {
20 20 state.categoryList = categoryList;
21   - },
  21 + }
22 22 };
23 23  
24 24 const actions = {
... ... @@ -84,7 +84,7 @@ const actions = {
84 84 console.log("complete status === > ", res);
85 85 },
86 86 })
87   - }
  87 + },
88 88 };
89 89  
90 90 export default {
... ...
src/store/modules/userRecommand.js
Diff comments   View file @93e6a26
... ... @@ -23,7 +23,8 @@ const actions = {
23 23 url: recommandList,
24 24 data: param,
25 25 success: (res) => {
26   - console.log(res.data.data)
  26 + console.log('ReccomandList请求结果',res.data)
  27 + // console.log(res.data.data)
27 28 // const Res={...res.data.data.list,...data.data.list}
28 29 const data = res.data.data
29 30 for (let index = 0; index < data.length; index++) {
... ...