uniapp 微信小程序 scroll-view 实现自定义下拉刷新
uniapp scroll-view官方说明文档
代码
<template>
<view class="home">
<u-sticky>
<view>
<div class="topbg">
<u-navbar leftIconColor="#D5D9E7" :titleStyle="titleStyle" title="订单" :placeholder="true"
:safeAreaInsetTop="true" :fixed="true" bgColor="rgba(0,0,0,0)" :autoBack="true">
</u-navbar>
</div>
</view>
<div class="searchbody">
<view class="topbody">
<div class="searchscreening">
<div class="search">
<image
src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/home/addressBook/icon_search.png"
mode=""></image>
<input confirm-type="search" @confirm="getdata" type="text" v-model="data.KeyWord"
placeholder="请输入订单编号/客户名称" placeholder-style="color:#B8BACB" />
</div>
<div @click="getshow" class="screening">
<image
src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/my/icon_shaixuan.png">
</image>
<text>筛选</text>
</div>
</div>
<div class="tabbody">
<tab_line4 @getactive="getactive" :active="active" :list="tablist"></tab_line4>
</div>
</view>
</div>
</u-sticky>
<scroll-view :style="'height:'+windowHeight+'px'" scroll-y="true" class="list scroll-Y" @scrolltolower="getmore"
:refresher-triggered="isPull" :refresher-threshold="100" :refresher-enabled="true"
@refresherrefresh="getdata(true)">
<div class="items">
<item :item="item" v-for="(item,index) in list" :key="index"></item>
</div>
<nodata mode="list" :loading='loading' :list="list"></nodata>
<u-loadmore v-if="list.length>0" :status="status" />
</scroll-view>
<add url="/packages/pages/enterprise/order/add/add"></add>
<getPopTypeByDateAndMaterial @getdata="getDates" ref="getPopTypeByDateAndMaterial">
</getPopTypeByDateAndMaterial>
</view>
</template>
<script>
import item from './item.vue'
import nodata from '@/components/nodata/index.vue'
import getPopTypeByDateAndMaterial from '@/components/getPopType/getPopTypeByDateAndMaterial.vue'
import tab_line4 from '@/components/tab/tab_line4.vue'
import {
GetSaleOrderList
} from '@/config/api.js'
export default {
data() {
return {
active: 0,
status: 'loadmore',
windowHeight: 0,
loading: true,
titleStyle: {
color: '#FFFFFF'
},
tablist: [{
id: '',
name: '全部'
}, {
id: 'Submission',
name: '待提交'
}, {
id: 'WaitExamine',
name: '待审核'
}, {
id: 'BeingWaitOutStock',
name: '出库中'
}, {
id: 'AlreadyWaitOutStock',
name: '已完成'
}, ],
total: 0,
list: [],
isPull: false,
data: {
"BelongId": "",
"KeyWord": "",
"ExamineState": "",
"MaterialCode": "",
"Btime": "",
"Etime": "",
"pageIndex": 1,
"pageSize": 10
}
}
},
components: {
item,
nodata,
tab_line4,
getPopTypeByDateAndMaterial
},
onShow() {
this.data.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
this.getdata()
},
mounted() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.windowHeight = res.windowHeight - res.statusBarHeight - 125
}
})
},
methods: {
getDates(e) {
console.log(e)
this.data.Btime = e.start
this.data.Etime = e.end
this.data.MaterialCode = e.MaterialCode
this.getdata()
},
getDate() {
this.$refs.getPopTypeByDate.getShow()
},
getshow() {
this.$refs.getPopTypeByDateAndMaterial.getShow()
},
getactive(e) {
this.active = e
this.data.ExamineState = this.tablist[e].id
this.getdata()
},
getdata(isPull = false) {
var that = this;
that.data.pageIndex = 1
that.status = 'loading'
if (isPull) {
that.isPull = true
}
setTimeout(() => {
that.isPull = false
}, 2000)
GetSaleOrderList(that.data, {
custom: {
auth: true
}
}).then(res => {
that.loading = false
that.isPull = false
this.status = 'loadmore'
if (res.Code == 200) {
that.list = res.Data
}
}).catch(err => {
})
},
getmore() {
var that = this;
that.data.pageIndex = that.data.pageIndex + 1;
this.status = 'loading';
GetSaleOrderList(that.data, {
custom: {
auth: true
}
}).then(res => {
var data = res.Data;
if (!data || data.length == 0) {
that.status = 'nomore';
} else {
this.status = 'loadmore'
}
for (var i = 0; i < data.length; i++) {
that.list.push(data[i]);
}
}).catch(err => {
})
},
}
}
</script>
<style scoped lang="scss">
.home {
width: 100%;
background: #F5F6FA;
}
.logo {
width: 194rpx;
}
.title {
font-size: 44rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.bodyitem {
width: calc(694rpx);
background: #FFFFFF;
border-radius: 24rpx;
margin: 28rpx auto;
padding: 32rpx 0;
margin-top: 0;
.bodyitemTitle {
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
padding: 0rpx 32rpx;
}
.bodyitembody {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
margin-left: 32rpx;
margin-top: 24rpx;
.bodyitembodys {
width: 196rpx;
height: 174rpx;
background: rgba(64, 135, 255, 0.05);
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
margin-right: 21rpx;
margin-bottom: 20rpx;
text {
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #454777;
margin-top: 15rpx;
}
}
.bodyitembodys:nth-child(3n) {
margin-right: 0;
}
}
.bodyitembody2 {
.bodyitembodys {
background: #F3FCF5;
}
}
.bodyitembody3 {
.bodyitembodys {
background: #FFFBF3;
}
}
}
.icons {
width: 64rpx;
height: 64rpx;
image {
width: 64rpx;
}
}
.topbg {
width: 100%;
background: url(https://images.wanjunshijie.com/mini/buildingMaterialsCloud/gsgl/gsgl.png) center top no-repeat #F5F6FA;
background-size: 750rpx 192rpx;
position: relative;
padding-bottom: 28rpx;
border-radius: 0 0 20rpx 20rpx;
}
.total {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A3A4BB;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 120rpx;
}
.searchbody {
// height: 236rpx;
background: #FFFFFF;
margin-bottom: 28rpx;
}
.search {
width: 524rpx;
height: 80rpx;
background: #F5F6FA;
border-radius: 20rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: 0 auto;
align-content: flex-start;
image {
width: 30rpx;
height: 30rpx;
margin-right: 8rpx;
margin-left: 28rpx;
margin-right: 16rpx;
}
text {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9D9EB7;
}
input {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4C4F7B;
width: 500rpx;
}
}
.searchscreening {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-left: 28rpx;
margin-right: 28rpx;
padding-top: 28rpx;
.screening {
margin-left: 24rpx;
width: 146rpx;
height: 80rpx;
background: #F5F6FA;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
flex-shrink: 1;
align-content: flex-start;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
image {
width: 32rpx;
height: 32rpx;
}
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
margin-left: 10rpx;
}
}
}
</style>
