wxml
<view style="width: auto; height: 100vh;">
<view style="width: auto; height: 100vh;">
<scroll-view class="scroll-view" scroll-y scroll-x
refresher-enabled="{{isRefresherEnabled}}" bindrefresherrefresh="downRefresh"
enable-passive scroll-with-animation="true" refresher-background="#F7F7F7"
refresher-triggered="{{isRefreshing}}">
<view class="tableHeaderLayout">
<view class="column1">{{tableHeader[0].label}}</view>
<view class="column2">{{tableHeader[1].label}}</view>
<view class="column3">{{tableHeader[2].label}}</view>
<view class="column4">{{tableHeader[3].label}}</view>
<view class="column5">{{tableHeader[4].label}}</view>
</view>
<view wx:for="{{dataList}}" wx:key="index">
<view class="tableHeaderLayout">
<view class="column1">{{index + 1}}</view>
<view class="column2">{{item.productName}}</view>
<view class="column3">{{item.status}}</view>
<view class="column4">{{item.transdate2}}</view>
<view class="column5">{{item.jobid}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
wxss
.tableHeaderLayout {width: 138vw;height: 5vh;font-size: 0.85rem;display: flex;display: -webkit-flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;}
.scroll-view {flex: 1;height: 99.7vh;border-top: 0.3vh solid #F7F7F7; }
.column1 {width: 10vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column2 {width: 18vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column3 {width: 12vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column4 {width: 40vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column5 {width: 55vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
js
Page({
data: {
dataList: [],
tableHeader: [{prop: 'sid',width: 70,label: '序号'},{prop: 'productName',width: 90,label: '模板'},{prop: 'status',width: 90,label: '状态'},{prop: 'transdate2',width: 310,label: '交易时间'},{prop: 'jobid',width: 440,label: '流水号'} ],
startIndex: 0,
count: 10,
isRefreshing: true,//设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
isRefresherEnabled: true,//开启自定义下拉刷新
},
onLoad(options) {
//初始化时,从服务器获取数据,给dataList赋值,此处略
},
downRefresh: function(e){
console.log('下拉刷新')
let pageindex = this.data.startIndex
let count = this.data.count
pageindex += 1 * count;
console.log('pageindex='+pageindex, 'count='+count)
//服务器请求数据,此处略
this.transHistory(pageindex, count);
//isRefresherEnabled:开启自定义下拉刷新
//isRefreshing: 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
this.setData({
isRefresherEnabled: true,
isRefreshing: false,
})
wx.showToast({title: '数据已更新', icon: 'none', duration: 2000})
},
})