小程序：实现翻页功能(解决数据过载)

最新推荐文章于 2024-07-25 20:50:48 发布

25号底片~

最新推荐文章于 2024-07-25 20:50:48 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签：小程序 apache 服务器

本文链接：https://blog.csdn.net/weixin_46001736/article/details/132737621

版权

微信小程序专栏收录该内容

40 篇文章 0 订阅

订阅专栏

效果

核心代码

①wxml设置翻页标签

<view class="pagination"  wx:if="{{list.length>0}}">

      <view class="page-button" bindtap="prevPage">上一页</view>

      <view class="page-info">{{ page }}</view>

      <view class="page-info">/</view>

      <view class="page-info">{{ totalPage }}</view>

      <view class="page-button" bindtap="nextPage">下一页</view>

</view>

②wxss设置翻页样式

/* 分页 */

.pagination {

  display: flex;

  align-items: center;

  justify-content: left;

  /* margin-bottom: 0; */

  /* border: 1px solid black; */

}

.page-button {

  height: 30px;

  line-height: 30px;

  padding: 0 10px;

  border: 1px solid white;

  border-radius: 5px;

  margin: 3%;

  cursor: pointer;

}

.page-info {

  font-weight: bold;

}

③js设置翻页功能

a.设置data数据

page: 1, // 当前页数

pageSize: 2, // 每页展示的数据条数

totalPage: 0, //总页数,

b.设置左右翻页功能

prevPage() {

    if (this.data.page > 1) {

      this.setData({

        page: this.data.page - 1,

        selList: [],

      })

      this.getdata();

    }

  },

  nextPage() {

    if (this.data.page < this.data.totalPage) {

      this.setData({

        page: this.data.page + 1,

        selList: [],

      })

      this.getdata();

    }

  },

c.传递当前页码和页面需要展示的数量去查询数据，并将返回的数据计算页数

getdata(){

    wx.request({

      url: app.globalData.position + 'Repair/select_never_repaired',

      data: {

        username:app.globalData.username,

        like_info1: this.data.like_info1,

        page: this.data.page,

        pageSize: this.data.pageSize

      },

      header: {

        "Content-Type": "application/x-www-form-urlencoded"

      },

      method: 'POST',

      dataType: 'json',

      success: res => {

        console.log(res.data)

        this.setData({

          list: res.data.info,

          count: res.data.count,

          totalPage: Math.ceil(res.data.total / this.data.pageSize)

        })

      },

      fail(res) {

        console.log("查询失败")

      }

    })

  },

④后端查询数据，并限制查询条件（这里采用thinkphp）

//查询从未维修过的单据
public function select_never_repaired()
{
$username = input('post.username');
$like_num = input('post.like_info1', '');
$page = input('post.page', 1); // 获取当前页数，默认为第一页
$pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数，默认为10条
$start = ($page - 1) * $pageSize; // 计算查询的起始位置
//通过账户查询到对应id
$account_id = db::table('fa_account_info')->where(['username' => $username])->value('id');
//当前员工下以工单号模糊查询
$data['info'] = db::table('rep_info_base')
->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
->where(['order_number' => ['like', '%' . $like_num . '%']])
->limit($start,$pageSize)
->select();
for ($i = 0; $i < count($data['info']); $i++) {
//创建时间
$data['info'][$i]['creation_time'] = date('Y-m-d H:i:s', $data['info'][$i]['creation_time']);
//期望完成时间
$data['info'][$i]['expect_complete_time'] = date('Y-m-d H:i:s', $data['info'][$i]['expect_complete_time']);
//分配时间
$data['info'][$i]['distribute_time'] = date('Y-m-d H:i:s', $data['info'][$i]['distribute_time']);
//排程时间
$data['info'][$i]['arrange_time'] = date('Y-m-d H:i:s', $data['info'][$i]['arrange_time']);
//维修状态设置为未维修
$data['info'][$i]['order_status'] = '待维修';
}
$data['total'] = db::table('rep_info_base')
->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
->where(['order_number' => ['like', '%' . $like_num . '%']])
->count();
$data['count'] = $data['total'];
echo json_encode($data);
}

完整代码

wxml

  <!--待排期-->
  <view style="margin-bottom:5%">
    <!-- 搜索框 -->
    <view class="top">
      <view class="search">
        <view class="search_in">
          <!-- 使用代码请更改图片路径 -->
          <image src="{{search}}"></image>
          <input type="text" placeholder="请输入工单号" placeholder-style="color:#CCCCCC" bindconfirm="search_wait_list" />
        </view>
      </view>
    </view>
    <!-- 主干内容 -->
    <view class="main">
      <view class="main_left"><text>{{count}}条数据</text></view>
      <view class="main_right">
        <!-- <view bindtap="showSelIcon">{{iconStatu?'完成':'多选'}}</view> -->
      </view>
    </view>
    <view class="nodata" wx:if="{{list==''}}">暂无数据</view>
    <view class="item_all_position" wx:for="{{list}}" wx:key="index" data-id='{{item.id}}'>
      <view class=" flex-def flex-cCenter flex-zBetween item_all">
        <icon wx:if="{{iconStatu}}" bindtap="toggleSel" type="success" size="30" color="{{item.selStatu?'#80c2e2':'#999'}}" data-id='{{item.id}}' />
        <view class="position" bindtap="allocating_detial" data-id='{{item.id}}'>
          <view class="vv_1">
            <!-- 故障类型 -->
            <view class="type">
              <view>{{item.fault_type}}</view>
            </view>
            <!-- 维修产品 -->
            <view class="vv_1_text">
              <view class="vv_1_text1">{{item.product_name}}</view>
              <view class="vv_1_text2">{{item.order_number}}</view>
            </view>
          </view>
          <view class="vv_4"><text>故障描述：</text>{{item.fault_description}}</view>
          <text class="vv_4" space="ensp"><text>期望时间：</text>{{item.expect_complete_time}}</text>
          <text class="vv_3" space="ensp"><text>故障地点：</text>{{item.report_address}}</text>
          <view class="vv_5"><text>维修状态：</text>{{item.order_status}}</view>
        </view>
      </view>
    </view>
    <view class="pagination"  wx:if="{{list.length>0}}">
      <view class="page-button" bindtap="prevPage">上一页</view>
      <view class="page-info">{{ page }}</view>
      <view class="page-info">/</view>
      <view class="page-info">{{ totalPage }}</view>
      <view class="page-button" bindtap="nextPage">下一页</view>
    </view>
  </view>

wxss

/* flex类名 */
/* 定义 */
.flex-def {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* 侧轴居中 */
.flex-cCenter {
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 主体信息布局 */
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main_left {
  width: 60%;
}

.main_left text {
  margin-left: 7%;
  color: #777A7C;
}

.main_right {
  width: 40%;
  text-align: right;
  padding-right: 5%;
  color: #777A7C;
}

/* 列表布局 */
.item_all_position {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item_all {
  box-sizing: border-box;
  width: 95%;
  border-radius: 10rpx;
  padding: 0 2% 2% 2%;
  margin-top: 5%;
  background-color: #FFFFFF;
  border-bottom: 2px solid rgba(202, 202, 202, 0.856);
  /* border: 1px solid black; */
}

/* 第一行 */
.vv_1 {
  font-size: 18px;
  background-color: #ffffff;
}

/* 第一行文字 */
.vv_1_text {
  display: flex;
  width: 80%;
  align-items: center;
  padding-left: 3%;
}

.vv_1_text1 {
  font-size: 110%;
  color: #76b5d4;
  font-weight: bold;
}

.vv_1_text2 {
  color: #7e7e7e;
  font-size: 90%;
  margin-left: 5%;
}

/* 第一行类型 */
.type {
  background-color: #65b5dd;
  padding: 1% 5%;
  font-size: medium;
  text-align: center;
  margin-bottom: 2%;
  float: right;
}

.vv_3 {
  padding: 3% 0 3% 3%;
  /* margin-left: 3%; */
  background-color: #ffffff;
  display: flex;
  color: gray;
  font-size: 95%;
}

.vv_4 {
  word-break: break-all;
  padding: 3% 0 3% 3%;
  /* margin-left: 3%; */
  color: gray;
  /* border:1px solid black; */
}
.vv_5{
  padding: 0 0 3% 3%;
  color: rgb(192, 82, 82);
}
.vv_5 text {
  color: rgb(97, 97, 97);
}
.vv_4 text {
  color: rgb(97, 97, 97);
}

.vv_3 text {
  color: rgb(97, 97, 97);
}

.footer {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 80prx;
  line-height: 80rpx;
  text-align: center;
}

.footer1 {
  background-color: #80c2e2;
  width: 50%;
  height: 80prx;
  line-height: 80rpx;
  text-align: center;
  border-right: 2px solid rgb(219, 219, 219);
}

.footer2 {
  background-color: #80c2e2;
  width: 50%;
  height: 80prx;
  line-height: 80rpx;
  text-align: center;
}

.position {
  width: 90%;
}

/* 搜索框 */
.search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5% 0 5% 0;
}

.search .search_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  height: 70rpx;
  width: 95%;
  border-radius: 5px;
  background-color: white;
}

.search_in image {
  height: 45rpx;
  width: 50rpx;
  margin-right: 10px;
}

.search input {
  width: 100%;
}

/* 暂无数据样式 */
.nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  font-size: 90%;
  margin-top: 50%;
}
/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: left;
  /* margin-bottom: 0; */
  /* border: 1px solid black; */
}

.page-button {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid white;
  border-radius: 5px;
  margin: 3%;
  cursor: pointer;
}

.page-info {
  font-weight: bold;
}

js

const app = getApp()
let handname = ''
Page({
  data: {
    search: app.globalData.icon + 'index/search.png',  
    page: 1, // 当前页数
    pageSize: 2, // 每页展示的数据条数
    totalPage: 0, //总页数,
    like_info1: '', //待排期的模糊查询条件
  },
  //模糊查询待排程信息
  search_wait_list(event) {
    this.page = 1;
    this.data.like_info1 = event.detail.value;
    this.getdata();
  },
  //进入已分配工单详情页
  allocating_detial: function (e) {
    // console.log(e.currentTarget.dataset.id) //待分配数据
    wx.navigateTo({
      url: '/pages/mine/detail/detail?id=' + e.currentTarget.dataset.id,
    })
  },
  getdata(){
    wx.request({
      url: app.globalData.position + 'Repair/select_never_repaired',
      data: {
        username:app.globalData.username,
        like_info1: this.data.like_info1,
        page: this.data.page,
        pageSize: this.data.pageSize
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      dataType: 'json',
      success: res => {
        console.log(res.data)
        this.setData({
          list: res.data.info,
          count: res.data.count,
          totalPage: Math.ceil(res.data.total / this.data.pageSize)
        })
      },
      fail(res) {
        console.log("查询失败")
      }
    })
  },
  prevPage() {
    if (this.data.page > 1) {
      this.setData({
        page: this.data.page - 1,
        selList: [],
      })
      this.getdata();
    }
  },
  nextPage() {
    if (this.data.page < this.data.totalPage) {
      this.setData({
        page: this.data.page + 1,
        selList: [],
      })
      this.getdata();
    }
  },
  //进入页面显示
  onLoad: async function (options) {
    this.getdata();
  },
  //分享
  onShareAppMessage:function(){
    //清空登录信息
    wx.removeStorageSync('username');
    //返回登录页面
    return {
      title: '维修系统',
      path: '/pages/login/main/main',
      imageUrl: '/images/share/title.png',
    }
  },
})

thinkphp

//查询从未维修过的单据
    public function select_never_repaired()
    {
        $username = input('post.username');
        $like_num = input('post.like_info1', '');
        $page = input('post.page', 1); // 获取当前页数，默认为第一页
        $pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数，默认为10条
        $start = ($page - 1) * $pageSize; // 计算查询的起始位置
        //通过账户查询到对应id
        $account_id = db::table('fa_account_info')->where(['username' => $username])->value('id');
        //当前员工下以工单号模糊查询
        $data['info'] = db::table('rep_info_base')
        ->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
        ->where(['order_number' => ['like', '%' . $like_num . '%']])
        ->limit($start,$pageSize)
        ->select();
        for ($i = 0; $i < count($data['info']); $i++) {
            //创建时间
            $data['info'][$i]['creation_time'] = date('Y-m-d H:i:s', $data['info'][$i]['creation_time']);
            //期望完成时间
            $data['info'][$i]['expect_complete_time'] = date('Y-m-d H:i:s', $data['info'][$i]['expect_complete_time']);
            //分配时间
            $data['info'][$i]['distribute_time'] = date('Y-m-d H:i:s', $data['info'][$i]['distribute_time']);
            //排程时间
            $data['info'][$i]['arrange_time'] = date('Y-m-d H:i:s', $data['info'][$i]['arrange_time']);
            //维修状态设置为未维修
            $data['info'][$i]['order_status'] = '待维修';
        }
        $data['total'] = db::table('rep_info_base')
        ->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
        ->where(['order_number' => ['like', '%' . $like_num . '%']])
        ->count();
        $data['count'] = $data['total'];
        echo json_encode($data);
    }