有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

小程序 下拉刷新(下拉刷新、上拉加载,代码可直接复用)CV提高效率

小程序 炮渣日记 3周前 (11-12) 22次浏览 已收录 0个评论 扫描二维码

效果图:

小程序 下拉刷新(下拉刷新、上拉加载,代码可直接复用)CV提高效率

代码:

wxml

<view wx:if="{{loadingHidden}}">
  <view class="product-search flex flex-align-center">
    <view class="search-input flex flex-align-center flex-1">
      <image src="../../images/icon-search.png"></image>
      <input type="text" bindinput="username_input" placeholder="输入门店名称进行搜索" class="flex-1" />
    </view>
    <view bindtap="to_search" class="search-btn"><button>搜索</button></view>
  </view>
  
  <view class="wrap">
    <view wx:if="{{list.length - 0 > 0}}" class="store-box">
      <view wx:for="{{list}}" wx:for-item="item" class="store-list flex flex-align-center">
        <view class="list-img"><image src="{{item['thumb']}}"></image></view>
        <view class="list-con flex-1">
          <view class="con-tit">{{item['name']}}</view>
          <view bindtap="call_mobile" data-mobile="{{item['mobile']}}" class="con-iphone flex">
            <image src="../../images/icon-iphone.png"></image>
            <text class="flex-1">{{item['mobile']}}</text>
          </view>
          <view class="con-location flex">
            <image src="../../images/icon-map.png"></image>
            <text class="flex-1">{{item['address']}}</text>
          </view>
        </view>
        <view bindtap="to_address" data-id="{{item['id']}}"  class="list-here">
          <image src="../../images/img-here.png"></image>
          <text>到这去</text>
        </view>
      </view>
    </view>
    
    <view wx:if="{{noproject}}" class="without-data">暂无数据</view>
  </view>
</view>
<loading hidden="{{loadingHidden}}">加载中...</loading>

json

{
  "navigationBarTitleText": "授权门店",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

js

// pages/store/store.js
var api = require('../../utils/api.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    page:1,
    limit:10,
    is_end:false,
    loadingHidden:false,
    keywords:'',
    noproject:false,
    // latitude: 23.099994,
    // longitude: 113.324520,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      list:[],
      page:1,
    })
    var page = that.data.page;
    var limit = that.data.limit;
    api.post({
      url: '/api/store/index',
      data: {
        page:page,
        limit:limit
      },
      success: function(data){
        wx.stopPullDownRefresh({
          complete(res) {
            wx.hideLoading();
          }
        })
        wx.setStorageSync('cur_page', 1);
        var list = that.data.list;
        for (var i = 0; i < data.list.length; i++) {
          list.push(data.list[i]);
        }
        if(wx.getStorageSync('cur_page')==1 && list.length == 0){
          that.setData({
            noproject:true
          })
        }
        that.setData({
          list: list,
          loadingHidden:true
        })
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showLoading({
      title: '加载中',
    });
    this.onLoad();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('触底');
    var that = this;
    if(that.data.is_end){
      wx.showToast({
        title: '已到底部',
        icon: 'none'
      })
      return false;
    }
    wx.showLoading({
      title: '加载中…',
    })
    var page = that.data.page;
    var limit = that.data.limit;

    page = page + 1;
    var cur_page = wx.getStorageSync("cur_page");
    if(page!=cur_page && parseInt(cur_page)+1==page){
      wx.setStorageSync('cur_page', page);
    }else{
      return false;
    }

    api.post({
      url: '/api/store/index',
      data: {
        page:page,
        limit:limit
      },
      success: function(data){
        var list = that.data.list;
        for (var i = 0; i < data.list.length; i++) {
          list.push(data.list[i]);
        }
        that.setData({
          list: list,
          page:page,
        })
        wx.hideLoading()
        if(data.list<10){
          wx.showToast({
            title: '已到底部',
            icon: 'none'
          })
          that.setData({
            is_end:true
          })
          return false;
        }
        
      }
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址