WXML:
<import src="../../template/tabbar/tabbar.wxml" />
<import src="../../template/nav/index.wxml"/>
<!-- 自定义导航开始 -->
<template is="navBarNoBack" data="{{...navH}}" />
<!-- //自定义导航结束 -->
<!-- 内容 -->
<scroll-view scroll-y="true" style="height:{{scroll_height}}px;" bindscrolltolower="getScroll">
<block wx:for="{{orderList}}" wx:for-item="order" wx:key="order">
<view class='orderView'>
<view class="{{order==1?'order-white':''}}">{{order}}</view>
</view>
</block>
<block wx:if="{{dixian==true}}">
<view style='text-align:center'>___我是有底线的___</view>
</block>
</scroll-view>
<!-- //内容 -->
<!-- 标签栏 -->
<template is="tabBar" data="{{...tabBar}}" />
注意:必须设置 scorll-view的高度!!!!!
WXSS:
page{
background-color: #EDEEF0;
}
.orderView{
text-align: center;
padding: 10rpx 0rpx;
}
.orderView>view{
display: inline-block;
width: 90%;
background-color: #FFFFFF;
height: 100rpx;
line-height: 100rpx;
border-radius: 10rpx;
}
.order-white{
background-color: #FDA744 !important;
}
JS:
// pages/distributors/newOrder.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
navH: { navH: app.globalData.navHeight, title: "新的订单" },
scroll_height: app.globalData.usableHeight,
orderList: [1, 2, 3, 4, 5,7,8,9,10,11,12,13,14],
pageIndex:1,//当前页页码
nextPage:1,//下一页页码
dixian: false,//显示 底线
},
/***
* 流加载
*/
getScroll: function (e) {
var _this = this;
var orderList = _this.data.orderList;
var a =[15,16,17,18,19,20,21,22,23,24,25,26,27]
console.log("流加载");
var nextPage=_this.data.nextPage;//获取下一页页码
var pageIndex = _this.data.pageIndex;//获取当前页页码
if (_this.data.dixian == false) {
nextPage += _this.data.pageIndex;//下一页页码+1
_this.setData({ nextPage: nextPage });//更新data中的下一页页码
}
_this.setData({
orderList: orderList.concat(a)
});
if(nextPage==3){
_this.setData({
dixian:true,
orderList:orderList
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
app.distributors();//加载配送商的标签栏
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})