微信小程序 tabs 选项卡 分页加载 + 图片上传

图片上传

image() {
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://www.tp6.com/mon/user/avatar', //仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          success(res) {
            console.log(res);
            const data = res.data;
            let json = JSON.parse(data)
            console.log(json);
            that.setData({
              avatar:json.data
            })
          }
        })
      }
    })
  },

页面 选项卡 滚动视图 swiper 轮播图

<!--pages/notice/notice.wxml-->
<view class="top-title">
  <view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">进行中</view>
    <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已完成</view>
  </view>
</view>

<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px"
  bindchange="bindChange">
  <swiper-item class="swiper-item">
    <scroll-view scroll-y="true" style="height: 300px;" bindscrolltolower="bottom">
      <view wx:if="{{lists ==false }}" class="done">
        <view class="done">没有数据</view>
      </view>
      <block wx:for="{{lists}}" wx:key="lists">
        <view class="item">
          <view class="iten time">
            <view class="left ">{{item.recycle_time}}</view>
            <view class="right  status">{{item.status}}</view>
          </view>
          <view class="iten info">
            <view class="left desc">{{item.desc}}</view>
            <view class="right btn">查看详情></view>
          </view>
        </view>
      </block>
    </scroll-view>
  </swiper-item>
  <swiper-item class="swiper-item">
    <view wx:if="{{endlists ==false }}" class="done">
      <view class="done">没有数据</view>
    </view>
    <block wx:for="{{endlists}}" wx:key="lists">
      <view class="item">
        <view class="iten time">
          <view class="left ">{{item.recycle_time}}</view>
          <view class="right cancel">{{item.status}}</view>
        </view>
        <view class="iten info">
          <view class="left desc">{{item.desc}}</view>
          <view class="right btn">查看详情></view>
        </view>
      </view>
    </block>
  </swiper-item>
</swiper>

下面css样式

/* pages/notice/notice.wxss */
page{
  background-color: #f6f7f9;
  font-size: 14px;
}
.top-title{
  width: 100%;
  height: 160rpx;
  position: fixed;
  z-index: 10;
  top: 0;
}
.swiper-tab {
  width: 100%;
  background-color: white;
  text-align: center;
  line-height: 80rpx;
  border-bottom: 1px solid #cccccc;
  display: flex;
  justify-content: space-around;
}
.tab-item {
  flex: 1;
  color: #777777;
}
.on {
  color: red;
  border-bottom: 5rpx solid red;
}
.swiper {
  margin-top: 160rpx;
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.item{
  width: 94%;
  height: 60px;
  padding: 10px 10px;
  background-color: white;
  margin-bottom: 10px;
}
.iten{
  width: 100%;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
}
.status{color:#01b367 ;}
.cancel{color:#ccc}
.info{
  color:#ccc;
  font-size: 12px;
}

.done{
  width: 100%;
  color: #ccc;
  line-height: 80rpx;
  text-align: center;
}

js 分页加载

// pages/notice/notice.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    lists:[],
    page:1,
    request:true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.notices();
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
 
  notices(){
    let that = this;
    let page = this.data.page ;
    //请求 为false时 提示没有数据加载
    if (!this.data.request) {
      wx.showToast({
        title: '已经没有更多新数据了',
        icon: 'none',
        duration: 1500,
        mask: true
      });
      return false;
    }
    //加载数据
    wx.showLoading({
      title: '数据加载中...',
      mask: true
    })
    let user = wx.getStorageSync('user');
    wx.request({
      url: 'http://www.tp6.com/mon/notice/index',
      data: {uid:user.id},
      dataType: 'json',
      header:{
        'Authorization':'Bearer '+wx.getStorageSync('token')
      },
      success:({data})=>{
        console.log(data);
        if(data.code == 200){
          //关闭加载提示
          wx.hideLoading({})
          if(data.data.lists.data.length > 0){
            that.setData({
              lists: that.data.lists.concat(data.data.lists.data),
              // endlists:that.data.endlists.concat(data.data.endlists.data),
              page: that.data.page + 1
            })
          }else{
            that.setData({
              request: false
            });
            // 没有数据
            wx.showToast({
              title: '已经没有更多新数据了',
              icon: 'none',
              duration: 1500,
              mask: true
            });
          }
        }else{
            wx.showToast({
              title: data.msg,
              icon:'none'
            })
        } 
      }
    });
  },
  //触底加载更多
  bottom(){
    this.notices();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      page:1,
      request:true,
      lists:[]
    })
    this.notices();
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //模拟加载
    setTimeout(function(){
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },2000);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

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

  }
})

这里是json页面的配置 必须项

{
  "usingComponents": {},
  "backgroundTextStyle": "dark", // 页面背景样式 用于区分下拉样式
  "enablePullDownRefresh" : true,//开启下拉功能
  "navigationBarTitleText": "tabs" // 顶部 页面标题
}