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>