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>