微信小程序 顶部 选项卡 tabs 下拉刷新
**首先 wxml 页面 带swiper 滑动切换功能 **
<!--pages/my/my.wxml--><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><swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px"bindchange="bindChange"><swiper-item class="item"><view class="record"><view class="title">体重记录</view><view class="desc">记录目标,减肥更有动力</view><view class="btn" bindtap="record">记录今天体重</view></view><scroll-view scroll-y="true" style="height: 300px;" bindscrolltolower="bottom" ><block wx:for="{{weight}}"><view class="top"><view class="date">{{item.date}}</view><view class="poor">{{item.poor}}</view><view class="weight">{{item.weight}}</view></view></block></scroll-view></swiper-item><swiper-item class="item"><view><canvas type="2D" canvas-id="columnCanvas" style="height:600px"></canvas></view></swiper-item></swiper>
然后是 wxss 样式
/* pages/my/my.wxss */.swiper-tab {width: 100%;text-align: center;line-height: 80rpx;border-bottom: 1px solid #cccccc;display: flex;flex-direction: row;justify-content: center;}.tab-item {flex: 1;font-size: 30rpx;display: inline-block;color: #777777;}.item{height: auto;background-color: #fe8341;}.on {color: red;border-bottom: 5rpx solid red;}.swiper {display: block;height: 100%;width: 100%;overflow: hidden;}.swiper view {text-align: center;}.record {margin: 10px auto;border: 1px solid #ccc;width: 95%;height: 135px;box-shadow: 5px 5px 2px #cccccc;border-radius: 20px;}.record view {line-height: 35px;}.title{width: 100%; text-align: start;}.btn{width: 60%;border-radius: 20px;background-color: #fe8341;color: white;margin: 10px auto;}.top {width: 750rpx;line-height: 30px;display: flex;border: 1px solid #cccccc;}.date {width: 70%;}.poor {width: 10%;color: #fe8341;}.weight {width: 20%;}
接下来 的是 重点 哦 js
// pages/my/my.jsvar wxCharts = require('./../../utils/wxcharts.js');Page({/*** 页面的初始数据*/data: {winWidth: 0,winHeight: 0,currentTab: 0,weight:[],poor:[],page:1,request:true},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {if(!wx.getStorageSync('token')){wx.navigateTo({url: '/pages/login/login',})return false;}this.weight();/** * 获取系统信息 */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})}},weight(){let page = this.data.page ;let that = this;//请求 为false时 提示没有数据加载if (!this.data.request) {wx.showToast({title: '已经没有更多新数据了',icon: 'none',duration: 1500,mask: true});return false;}//加载数据wx.showLoading({title: '数据加载中...',mask: true})wx.request({url: '/week2/weight/index',data:{user_id:wx.getStorageSync('user_id'),page},dataType:'json',header:{'Authorization':'Bearer '+wx.getStorageSync('token')},success:({data})=>{console.log(data);if(data.code == 200){//关闭加载提示wx.hideLoading({})if(data.data.weight.data.length > 0){// console.log(91);that.setData({weight:that.data.weight.concat(data.data.weight.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'})}}})},record(){wx.navigateTo({url: '/pages/add/add',})},//触底加载更多bottom(){this.weight();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {wx.request({url: '/week2/weight/line',dataType:'json',success:({data})=>{// console.log(data);if(data.code=200){let weightdata =data.data.weight;setTimeout(function () {new wxCharts({canvasId: 'columnCanvas',type: 'column',categories: ['一', '二', '三', '四', '五', '六', '日'],series: [{name: '体重',data:weightdata,format: function (val, name) {return val.toFixed(1) + 'KG';}}],yAxis: {name:'体重',format: function (val) {return val + 'kg';}},width: 320,height: 200});}, 1000)}}});},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.setData({page:1,request:true,weight:[]})this.weight();wx.showNavigationBarLoading() //在标题栏中显示加载//模拟加载setTimeout(function(){// completewx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新},2000);},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
**这里使用了 下拉刷新的功能 json页面 **
如果需要给单个页面设置下拉刷新功能，不需要写在“”window”对象里面，直接在 文件名称.json 里面设置即可
{"usingComponents": {},"backgroundTextStyle": "dark", // 页面背景样式 用于区分下拉样式"enablePullDownRefresh" : true,//开启下拉功能"navigationBarTitleText": "tabs" // 顶部 页面标题}
下面是我的样式效果 有点丑别在意
