Commit 967ce241aff1735e153c739abc15fe718860fdca
1 parent
b38a27f3ec
Exists in
master
合并冲突
Showing
3 changed files
with
68 additions
and
27 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
| ... | ... | @@ -3,10 +3,14 @@ |
| 3 | 3 | class="card" |
| 4 | 4 | @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" |
| 5 | 5 | > |
| 6 | - <image | |
| 6 | + <easy-loadimage mode="widthFix" | |
| 7 | + :scroll-top="scrollTop" | |
| 8 | + :image-src="goods.imgurl?goods.imgurl:goods.pic" | |
| 9 | + :viewHeight="viewHeight"></easy-loadimage> | |
| 10 | +<!-- <image | |
| 7 | 11 | mode="widthFix" |
| 8 | 12 | :src="goods.imgurl?goods.imgurl:goods.pic" |
| 9 | - ></image> | |
| 13 | + ></image> --> | |
| 10 | 14 | <view class="name">{{goods.name?goods.name:goods.p_name}}</view> |
| 11 | 15 | <view class="info"> |
| 12 | 16 | <view class="priceBox"> |
| ... | ... | @@ -22,7 +26,10 @@ |
| 22 | 26 | </template> |
| 23 | 27 | |
| 24 | 28 | <script> |
| 29 | +import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' | |
| 30 | +// const MockData = require('@/static/easy-loadimage/mock-data.json') | |
| 25 | 31 | export default { |
| 32 | + components:{easyLoadimage}, | |
| 26 | 33 | props: { |
| 27 | 34 | /** |
| 28 | 35 | * 商品数据 |
| ... | ... | @@ -37,15 +44,17 @@ export default { |
| 37 | 44 | trade_num: String, |
| 38 | 45 | goodType: String, |
| 39 | 46 | }, |
| 40 | - | |
| 47 | + scrollTop:Number, | |
| 48 | + viewHeight:Number, | |
| 41 | 49 | }, |
| 42 | 50 | created () { |
| 43 | 51 | }, |
| 44 | 52 | data () { |
| 45 | 53 | return { |
| 46 | - | |
| 54 | + | |
| 47 | 55 | } |
| 48 | 56 | }, |
| 57 | + | |
| 49 | 58 | methods: { |
| 50 | 59 | toGoods (id, skId) { |
| 51 | 60 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) |
| ... | ... | @@ -61,6 +70,7 @@ export default { |
| 61 | 70 | </script> |
| 62 | 71 | |
| 63 | 72 | <style lang="scss"> |
| 73 | + | |
| 64 | 74 | image { |
| 65 | 75 | width: 100%; |
| 66 | 76 | height: 120rpx; | ... | ... |
src/pages/index/index.vue
| ... | ... | @@ -84,6 +84,12 @@ |
| 84 | 84 | data-format="Object" |
| 85 | 85 | ></HMfilterDropdown> |
| 86 | 86 | <!-- 商品列表 --> |
| 87 | +<!-- <scroll-view | |
| 88 | + enable-flex | |
| 89 | + @scrolltolower="handleScrolltolower" | |
| 90 | + scroll-y | |
| 91 | + style="height: 1000px;margin-bottom: 20px;" | |
| 92 | + > --> | |
| 87 | 93 | <view class="goods-list"> |
| 88 | 94 | <view class="product-list"> |
| 89 | 95 | <view |
| ... | ... | @@ -91,11 +97,12 @@ |
| 91 | 97 | v-for="(goods) in goodsList" |
| 92 | 98 | :key="goods.id" |
| 93 | 99 | > |
| 94 | - <Card :goods="goods"></Card> | |
| 100 | + <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | |
| 95 | 101 | </view> |
| 96 | 102 | </view> |
| 97 | 103 | <view class="loading-text">{{loadingText}}</view> |
| 98 | 104 | </view> |
| 105 | + <!-- </scroll-view> --> | |
| 99 | 106 | </view> |
| 100 | 107 | </view> |
| 101 | 108 | </view> |
| ... | ... | @@ -120,13 +127,22 @@ export default { |
| 120 | 127 | loadingText: '~~到底了~~', |
| 121 | 128 | filterDropdownValue: [], |
| 122 | 129 | filterData: [], |
| 123 | - searchText: '' | |
| 130 | + searchText: '', | |
| 131 | + scrollTop: 0, | |
| 132 | + viewHeight: uni.getSystemInfoSync().windowHeight, | |
| 124 | 133 | } |
| 125 | 134 | }, |
| 135 | + onPageScroll({scrollTop}) { | |
| 136 | + // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | |
| 137 | + | |
| 138 | + this.scrollTop = scrollTop; | |
| 139 | + console.log('pagescroll====>',this.viewHeight) | |
| 140 | + }, | |
| 126 | 141 | computed: { |
| 127 | 142 | goodsList () { |
| 128 | 143 | // 也可以从 getters 获取 |
| 129 | - // console.log('index-list=====>',this.$store.state.index.list) | |
| 144 | + // console.log('index-list=====>',this.$store.state.index.pageList) | |
| 145 | + | |
| 130 | 146 | return this.$store.state.index.list |
| 131 | 147 | }, |
| 132 | 148 | categoryList () { | ... | ... |
src/pages/user/user.vue
| ... | ... | @@ -36,10 +36,16 @@ |
| 36 | 36 | <button @tap="chatOur(2)">客服2</button> |
| 37 | 37 | </view> |
| 38 | 38 | </uni-popup> |
| 39 | - <view | |
| 40 | - v-if="isAuth" | |
| 41 | - class="content" | |
| 42 | - > | |
| 39 | +<!-- <scroll-view | |
| 40 | + enable-flex | |
| 41 | + @scrolltolower="handleScrolltolower" | |
| 42 | + scroll-y | |
| 43 | + style="height: 1000px;" | |
| 44 | + > --> | |
| 45 | + <view | |
| 46 | + v-if="isAuth" | |
| 47 | + class="content" | |
| 48 | + > | |
| 43 | 49 | <view class="userInfo"> |
| 44 | 50 | <view class="info"> |
| 45 | 51 | <image |
| ... | ... | @@ -190,24 +196,26 @@ |
| 190 | 196 | </view> |
| 191 | 197 | <!-- 商品列表 --> |
| 192 | 198 | <view class="goods-list"> |
| 193 | - <scroll-view | |
| 199 | +<!-- <scroll-view | |
| 194 | 200 | enable-flex |
| 195 | 201 | @scrolltolower="handleScrolltolower" |
| 196 | 202 | scroll-y |
| 197 | 203 | class="product-list" |
| 198 | - > | |
| 204 | + > --> | |
| 205 | + <view class="product-list"> | |
| 199 | 206 | <view |
| 200 | 207 | class="product" |
| 201 | 208 | v-for="(item, index) in userRecommandList" |
| 202 | 209 | :key="index" |
| 203 | 210 | > |
| 204 | - <Card :goods="item"></Card> | |
| 211 | + <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> | |
| 205 | 212 | </view> |
| 206 | - </scroll-view> | |
| 213 | + </view> | |
| 214 | + <!-- </scroll-view> --> | |
| 207 | 215 | <view class="loading-text">{{loadingText}}</view> |
| 208 | 216 | </view> |
| 209 | 217 | </view> |
| 210 | - </view> | |
| 218 | + </view> | |
| 211 | 219 | <view |
| 212 | 220 | v-else |
| 213 | 221 | class="auth" |
| ... | ... | @@ -222,6 +230,7 @@ |
| 222 | 230 | @getuserinfo="onGotUserInfo" |
| 223 | 231 | >授权登陆</button> |
| 224 | 232 | </view> |
| 233 | + <!-- </scroll-view> --> | |
| 225 | 234 | </view> |
| 226 | 235 | </template> |
| 227 | 236 | |
| ... | ... | @@ -239,9 +248,16 @@ export default { |
| 239 | 248 | return { |
| 240 | 249 | isAuth: true, // 是否显示授权页面, |
| 241 | 250 | pagesnum: 1, // 分页请求初始值 |
| 242 | - whichTap: 0 // 弹窗渲染选择条件 | |
| 251 | + whichTap: 0 ,// 弹窗渲染选择条件 | |
| 252 | + loadingText: '到底了', | |
| 253 | + scrollTop: 0, | |
| 254 | + viewHeight: uni.getSystemInfoSync().windowHeight, | |
| 243 | 255 | } |
| 244 | 256 | }, |
| 257 | + onPageScroll({scrollTop}) { | |
| 258 | + // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 | |
| 259 | + this.scrollTop = scrollTop; | |
| 260 | + }, | |
| 245 | 261 | onLoad() { |
| 246 | 262 | // 判断是否授权 |
| 247 | 263 | uni.getSetting({ |
| ... | ... | @@ -260,6 +276,15 @@ export default { |
| 260 | 276 | page: this.pagesnum |
| 261 | 277 | }) |
| 262 | 278 | }, |
| 279 | + onReachBottom() { | |
| 280 | + // console.log('usr-my',this.$store.state.user.userInfo) | |
| 281 | + this.pagesnum++ | |
| 282 | + store.dispatch('userRecommand/getRecommandList', { | |
| 283 | + uid: this.$store.state.user.userInfo.uid, | |
| 284 | + openid: this.$store.state.user.userInfo.openid, | |
| 285 | + page: this.pagesnum | |
| 286 | + }) | |
| 287 | + }, | |
| 263 | 288 | computed: { |
| 264 | 289 | nickName() { |
| 265 | 290 | return this.$store.state.user.userInfo.nickName |
| ... | ... | @@ -330,15 +355,6 @@ export default { |
| 330 | 355 | uni.navigateTo({ |
| 331 | 356 | url: '../addOpticsData/addOpticsData' |
| 332 | 357 | }) |
| 333 | - }, | |
| 334 | - handleScrolltolower() { | |
| 335 | - // console.log('usr-my',this.$store.state.user.userInfo) | |
| 336 | - this.pagesnum++ | |
| 337 | - store.dispatch('userRecommand/getRecommandList', { | |
| 338 | - uid: this.$store.state.user.userInfo.uid, | |
| 339 | - openid: this.$store.state.user.userInfo.openid, | |
| 340 | - page: this.pagesnum | |
| 341 | - }) | |
| 342 | 358 | } |
| 343 | 359 | } |
| 344 | 360 | } |
| ... | ... | @@ -573,7 +589,6 @@ export default { |
| 573 | 589 | display: flex; |
| 574 | 590 | justify-content: space-between; |
| 575 | 591 | flex-wrap: wrap; |
| 576 | - height: 400px; | |
| 577 | 592 | .product { |
| 578 | 593 | width: 48%; |
| 579 | 594 | margin: 0 0 20rpx 0; | ... | ... |