微信小程序顶部选项卡 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.js
var 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: 'http://www.tp6.com/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: 'http://www.tp6.com/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" // 顶部 页面标题
}

下面是我的样式效果有点丑别在意

微信小程序顶部选项卡 tabs 下拉刷新相关推荐

微信小程序直播间实现下拉刷新(目前全网最优最美观的方法)
微信小程序直播间实现下拉刷新先上效果: 1.下拉距离一定时出现动画,保持下拉直到距离足够大时触发函数加载直播间列表,而且在足够大距离时会有振动反馈,增强用户体验 2.下拉小距离出现动画,此时释放不会 ...
this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新
微信小程序蕴含着众多功能,本期将简单介绍实现页面下拉刷新的方法,通过阅读本文,读者们可以自行动手操作,在实践中认识微信小程序. 首先,我们需在json配置中写出以下配置: "enablePu ...
微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...
微信小程序（2）--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载
样式基于weui 首先需要配置页面的json文件,启用下拉刷新 {"enablePullDownRefresh": true } 在WXML里,通过列表渲染即可显示数据 <v ...
微信小程序开发实战（下拉刷新事件应用）
@作者 : SYFStrive @博客首页 : HomePage
微信小程序关闭苹果手机的下拉刷新
在需要关闭的page.json里面添加: "disableScroll":true
微信小程序实现循环列表下拉功能（点击事件）
在微信小程序里有下拉功能如果循环列表当执行点击事件的时候就会同时执行.下面主要实现了循环列表的点击事件操作.(也有数据里面嵌套数据) wxml <view class="sele ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...

微信小程序顶部选项卡 tabs 下拉刷新

微信小程序顶部选项卡 tabs 下拉刷新

微信小程序顶部选项卡 tabs 下拉刷新相关推荐

最新文章

热门文章

微信小程序 顶部 选项卡 tabs 下拉刷新

微信小程序 顶部 选项卡 tabs 下拉刷新

微信小程序 顶部 选项卡 tabs 下拉刷新相关推荐

最新文章

热门文章

微信小程序顶部选项卡 tabs 下拉刷新

微信小程序顶部选项卡 tabs 下拉刷新

微信小程序顶部选项卡 tabs 下拉刷新相关推荐