uni app 上拉加载下拉刷新代码
uni app 上拉加载下拉刷新代码
先记下来,以后备用
<template> <view class="app"> <u-row> <u-col span="4"> <!-- <mix-list-cell :title="category.caname" @onClick="show=true"></mix-list-cell> --> <mix-list-cell :title="brandname" @onClick="toallbrand()"></mix-list-cell> </u-col> <u-col span="8"> <u--input placeholder="请输入搜索关键字" @change="changetxt" @confirm="ok" :value="key" suffixIcon="search"></u--input> </u-col> </u-row> <view style="background-color: white; display:flex;"> <u-tag text="0-3万" plain style="margin:10px;" @click="setprice(0,3)" :type="getpricestyle()"></u-tag> <u-tag text="3-6万" plain style="margin:10px;" @click="setprice(3,6)" :type="minprice==3?'error':'primary'"></u-tag> <u-tag text="6万以上" plain style="margin:10px;" @click="setprice(6,3000)" :type="minprice==6?'error':'primary'"></u-tag> <u-tag text="清除所有条件" plain style="margin:10px 10px 10px 20px;" @click="clearallcond()" type="success"></u-tag> </view> <view class="mix-product-list is-row"> <view class="list-item column" v-for="onepro in products"> <view class="image-wrapper" @click="showDetail(onepro.Id)"> <image :src="getimg(onepro.FirstImg)" mode="aspectFill"></image> </view> <text class="title clamp2">{{onepro.Proname}}</text> <u-row style="font-size: 60%;color:gray;"> <u-col span="6" style="text-align: center;"> {{onepro.Spsj}} </u-col> <u-col span="6" style="text-align: center;"> {{onepro.Bxlc}} </u-col> </u-row> <view class="price-wrap row"> <view class="mix-price-view" style="fontSize: 26rpx"> <text>¥</text> <text class="price" style="fontSize: 34rpx">{{onepro.Price}}</text> <text>万元</text> </view> <view class="fill"></view> <view class="tag center"> <text>详情</text> </view> </view> </view> <view style="text-align: center;color:#bbb; margin:10px auto;" v-show="isbottom"> <text>-----------到底了-----------</text> </view> </view> <u-picker :show="show" :columns="calist" @cancel="show=false" @confirm="confirm" keyName="caname"></u-picker> </view> </template> <script> import $http from '@/common/lib/request.js' export default { data() { return { brandname:'选择品牌', minprice:0, maxprice:100000, key:'', show: false, calist: [], pageindex: 1, //第1页 pagesize: 10, //页大小 products: [], caid: "", isbottom: false, //是否到底了,没有数据取出来则是。 category: {}, } }, onLoad(option) { var caid = option.caid; var key=option.key; var brandname= option.brandname; if (!this.$utils.isEmptyNullUndefined(caid)) { this.caid = caid; $http.get("/api/category/getmodel?id=" + caid).then(res => { this.category = res; }) } if(!this.$utils.isEmptyNullUndefined(key)){ this.key = key; } if(!this.$utils.isEmptyNullUndefined(brandname)){ this.brandname = brandname; } $http.get('/api/category/list').then(res => { let newObj = { id: '0',caname:"--全部--" }; res.unshift(newObj); this.calist.push(res); if(this.$utils.isEmptyNullUndefined(caid)){ this.category = res[0]; } }) this.getproducts(); }, onPullDownRefresh() { console.log('下拉重新加载第一页'); setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); this.products = []; this.pageindex = 1; this.getproducts(); }, onReachBottom() { var temp = this.pageindex + 1; this.pageindex = temp; this.getproducts(); }, methods: { getpricestyle(){ if(this.minprice==0 && this.maxprice==3){ return "error"; }else{ return "primary" } }, clearallcond(){ this.brandname="选择品牌"; this.minprice=0; this.maxprice=1000000; this.products = []; this.pageindex = 1; this.getproducts(); }, changetxt(v){ this.key = v; }, ok(v){ console.log(v); this.key = v; this.products = []; this.pageindex = 1; this.getproducts(); }, // 回调参数为包含columnIndex、value、values confirm(e) { console.log('confirm', e) this.show = false console.log(e.value[0]); this.caid = e.value[0].id this.category.caname = e.value[0].caname; this.products = []; this.pageindex = 1; this.getproducts(); }, aaa() { this.show = true; console.log(this.show, "this.show") }, getimg(imgs) { return getApp().globalData.baseUrl + imgs; }, //显示商品详情 showDetail(proid) { var url = "/pages/product/detail?id=" + proid; uni.navigateTo({ url: url, }) }, setprice(min,max){ this.minprice=min; this.maxprice = max; this.products = []; this.pageindex = 1; this.getproducts(); }, //取商品分页数据 getproducts() { var bname = this.brandname; if(bname=="选择品牌"){ bname=""; } var url = "/api/product/list?pageindex=" + this.pageindex + "&pagesize=" + this.pagesize + "&caid=" + this.caid+"&key="+this.key+ "&brandname="+bname+"&minprice="+this.minprice+"&maxprice="+this.maxprice $http.get(url).then(res => { if (res.length == 0) { this.isbottom = true; } else { res.forEach(item => { this.products.push(item); }) } }) }, toallbrand(){ uni.navigateTo({ url:'/pages/allbrand/allbrand' }) } } } </script> <style scoped lang="scss"> /*商品列表*/ .mix-product-list { display: flex; justify-content: space-between; flex-wrap: wrap; width: 710rpx; margin-left: 20rpx; background-color: #f7f7f7; &.is-row { margin-top: -4rpx; border-radius: 8rpx; box-shadow: 4rpx 4rpx 20rpx rgba(0, 0, 0, .06); overflow: hidden; } } /* 横向列表 */ .list-item.row { width: 100%; padding: 24rpx 0 24rpx 24rpx; background-color: #fff; &:after { border-color: #eaeaea; left: 6rpx; right: 6rpx; } &:last-child:after { border: 0; } .image-wrapper { flex-shrink: 0; width: 160rpx; height: 160rpx; margin-right: 20rpx; border-radius: 6rpx; overflow: hidden; image { width: 100%; height: 100%; } } .right { flex: 1; overflow: hidden; } .title { margin-right: 24rpx; font-size: 30rpx; color: #333; line-height: 40rpx; } .sales { height: 40rpx; margin: 14rpx 0 28rpx; line-height: 40rpx; font-size: 26rpx; color: #888; } .price-wrap { display: flex; align-items: baseline; padding-right: 20rpx; } .m-price { font-size: 26rpx; text-decoration: line-through; color: #999; margin-left: 10rpx; } .tags { flex: 1; justify-content: flex-end; position: relative; bottom: 4rpx; } .tag { height: 32rpx; padding: 0 10rpx; margin-left: 10rpx; font-size: 20rpx; color: #fff; border-radius: 4rpx; background-color: $base-color; &.orange { background-color: orange; } } } /* 竖向列表 */ .list-item.column { width: 350rpx; padding-bottom: 16rpx; margin-bottom: 12rpx; background: #fff; border-radius: 8rpx; overflow: hidden; box-shadow: 0 0 16rpx rgba(0, 0, 0, .06); position: relative; .image-wrapper { width: 100%; height: 200rpx; overflow: hidden; image { width: 100%; height: 100%; } } .title { font-size: 28rpx; color: #333; line-height: 36rpx; padding: 0 16rpx; margin-top: 18rpx; height: 76rpx; } .price-wrap { padding: 0 16rpx; margin-top: 18rpx; } .m-price { font-size: 24rpx; text-decoration: line-through; color: #999; margin-left: 10rpx; &:before { content: "¥"; } } .tag { height: 32rpx; padding: 0 10rpx; font-size: 20rpx; background-color: $base-color; color: #fff; border-radius: 4rpx; transform: translateY(-4rpx); } } /*价格一大一小*/ .mix-price-view { color: $color-price; } .price { font-weight: 700; } /*商品列表 end*/ </style>
撸码:复制、粘贴,拿起键盘就是“干”!!!