小程序实现分类内容下拉刷新,上拉加载更多

2020-04-01   阅读:531   分类:后端    标签: 微信小程序

效果演示:

GIF2.gif


小程序上拉加载更多,下来刷新,在项目开发中是最常见,以下是一个简单的案例,供大家参考

wxml文件代码:

<!--index.wxml-->
<view class="out">
  <!-- 项目 -->
    <view class='left'>
    <block wx:for="{{category}}">
      <view class='nav-item active'  wx:if="{{tags == item.id}}" data-id="{{item.id}}" bindtap="btn_cate">{{item.book_cate}}</view>
      <view wx:else data-id="{{item.id}}" data-id="{{item.id}}" bindtap="btn_cate" class='nav-item'>{{item.book_cate}}</view>
      </block>
    </view>
    <view class='right'>
      <view class='book-list'>
      <block wx:for="{{art}}">
        <view class='book-item' bindtap='book_detail' data-id="{{item.id}}" bindtap="change_book_d">
          <view class='bookimg'><image src='{{item.img}}' mode='widthFix'></image></view>
          <view class='bookname'>{{item.name}}</view>
          <view class='bookproject'>{{item.desc}}</view>
          <view class='bookdesc'>+在线阅读</view>
        </view>
       </block>
      </view>
    </view>
</view>


json文件代码"enablePullDownRefresh": true, 开启小程序下拉刷新

{  
"enablePullDownRefresh": true,
  "usingComponents": {}
 
}

js文件代码:

// pages/book/book.js
const app = getApp()
var page = 1; //设置默认页码
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    category: [],
    tags: '3',
    art: []
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.category(); //查询分类标签
    this.getArt();
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    var tags = that.data.tags
    page = 1;
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success: function (res) {
        that.setData({
          art: res.data.result,
        })
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    // 页数+1
    page = page + 1;
 
    var that = this;
    var tags = that.data.tags
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success: function (res) {
        var oldData = that.data.art; //获取旧的数据
        var newData = res.data.result; //获取旧的数据
        that.setData({
          art: oldData.concat(newData)
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
  // 查询分类标签
  category: function () {
    var that = this
    wx.request({
      url: app.AppUrl + '/getbookcate',
      success(res) {
        that.setData({
          category: res.data.result,
        })
      }
    })
  },
  // 获取文章
  getArt: function () {
    var tags = this.data.tags;
    var that = this
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '/page=' + page,
      success(res) {
        that.setData({
          art: res.data.result,
        })
      }
    })
  },
  // 点击获取分类文章
  btn_cate: function (e) {
    var tags = e.currentTarget.dataset.id
    var that = this
    that.setData({
      tags: tags
    })
    page = 1;
    wx.request({
      url: app.AppUrl + '/get_book/cate_name/' + tags + '?page=' + page,
      success(res) {
        that.setData({
          art: res.data.result,
        })
      }
    })
  }
})


wxss样式文件代码:

page{
   width: 100%;
   height: 100%;
}
 .out{
    width:100%;
    height:100%;
    display: flex;
    flex-direction:row-reverse;
}
.left{
   width:18%;
   height: 100%;
   border-right:2rpx solid #ccc;
   position: fixed;
   left: 0px;
   top: 0px;
}
.nav-item{
  text-align: center;
  font-size: 32rpx;
  padding: 30rpx 0;
}
.active{
  color: #fb7299;
  border-left:3px solid #fb7299;
  }
.right{
   width:76%;
   height: 100%;
   padding: 20rpx;
   text-align: center;
  
}
.book-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.book-item{
  width: 48%;
  margin: 10rpx 0;
  border:1rpx solid #ddd;
 
}
.bookimg{
  width: 100%;
}
.bookimg image{
  width: 100%;
  display: block;
  height: 612rpx;
}
.bookname{
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-size: 28rpx;
  text-align: left;
  padding: 5rpx 0;
  color: #333;
  font-weight: bold;
  padding-left: 15rpx;
   padding-right: 15rpx;
}
.bookproject{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  font-size: 20rpx;
  text-align: left;
  padding: 3rpx 0;
  color: #555;
  padding-left: 15rpx;
   padding-right: 15rpx;
}
.bookdesc{
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  padding-bottom: 22rpx;
  padding-right: 15rpx;
  padding-top: 12rpx;
}


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/301.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×