微信小程序tab切换,滑动点击切换后获取到内容怎么上拉加载更多下拉刷新呢?
<view class='swiper-tab'>
<view class="weui-navbar" style="position:fixed;background:#fff">
<block wx:for="{{tabName}}">
<view class="swiper-tab-item {{currentTab == index?'active':''}}" data-current="{{index}}" data-type-id="{{item.id}}" bindtap="clickTab">{{item.name}}</view>
</block>
</view>
</view>
<swiper current='{{currentTab}}' duration='300' style='height:{{winHeight}}rpx' bindchange='swiperTab'>
<swiper-item wx:for="{{tabName}}">
<scroll-view scroll-y="true" class="scoll-h">
<navigator data-id="{{item.id}}" url='../info/info?id={{data.id}}' wx:for="{{typeList}}" wx:for-item="data">
<view class='newstype-item'>
<image src='{{data.litpic}}' class='pic' mode='aspectFill'></image>
<view class='newstype-item-right'>
<text class='newstype-item-maintext'>{{data.title}}</text>
<view class='newstype-item-bottom'>
<text class='newstype-item-smalltext'>{{data.time}}</text>
<view class='newstype-item-bottom-right'>
<image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
<view class='newstype-item-smalltext' style="margin-left:10rpx; font-size: 20rpx; margin-bottom:1rpx">{{data.click}}</view>
</view>
</view>
</view>
</view>
</navigator>
</scroll-view>
</swiper-item>
</swiper>
<view class="weui-loadmore" hidden="{{!hasMoreData}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>
后端js代码:
var app = getApp();
var url = app.d.ceshiUrl + 'category';
var listUrl = app.d.ceshiUrl + 'catList';
var page = 1;
var page_size = 6;
Page({
/**
* 页面的初始数据
*/
data: {
//tabName: ['中医药膳', '中医方剂', '中医养生', '中医常识'],
currentTab: 0,
typeList: [],
hasMoreData: true,
bottomTitle: false
},
//滑动切换
swiperTab: function(e) {
//console.log(e.detail.current)
//console.log(this.data.tabName[e.detail.current].id)
var that = this
var current = e.detail.current
var typeid = that.data.tabName[current].id
//console.log(typeid)
this.setData({
currentTab: e.detail.current
})
wx.request({
url: listUrl,
method: 'post',
data: {
cat_id: typeid,
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
//console.log(res);
if (res.data.status === 1) {
that.setData({
typeList: res.data.list,
hasMoreData: true
})
}
}
})
},
//点击切换
clickTab: function(e) {
var that = this;
//console.log(e)
const currentTab = e.target.dataset.current;
const typeid = e.target.dataset.typeId;
if (that.data.current === currentTab) {
return false;
} else {
that.setData({
currentTab: currentTab
})
console.log(currentTab);
wx.request({
url: listUrl,
method: 'post',
data: {
cat_id: typeid,
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
//console.log(res);
if (res.data.status === 1) {
that.setData({
typeList: res.data.list,
hasMoreData: true
})
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this
//高度自适应
wx.getSystemInfo({
success: function(res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR + 80;
that.setData({
winHeight: calc
})
},
})
wx.request({
url: url,
method: 'post',
data: {
page: page,
page_size: page_size
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
console.log(res)
if (res.data.status === 1) {
that.setData({
tabName: res.data.category,
typeList: res.data.list,
hasMoreData: true
})
} else {
wx.showToast({
title: res.data.error,
duration: 2000
})
}
that.setData({
currentTab: 0
})
},
fail: function() {
wx.showToast({
title: '网络异常',
duration: 2000
})
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
})
这里是最终的渲染效果:

我是后端程序兼前端的,没事自己练练手,可是实在搞不懂了,哪位帮忙看看,在此感激不尽!
相关推荐
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
主要介绍了微信小程序tab切换可滑动切换导航栏跟随滚动实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
构建微信小程序的可滑动Tab视图
在微信小程序的开发中,滑动tab视图是一个常见的需求,主要用来在不同的页面或视图之间进行快速切换。用户通过滑动手指轻松地浏览不同的信息分类,它不仅提升了用户体验,还增加了界面的美观度。随着用户对界面流畅性和操作便捷性的要求日益提高,一个能够平滑响应用户操作的滑动tab视图成为了衡量小程序性能的重要指标。然而,这个需求的实现并非一蹴而就。开发者需要考虑到tab视图的可扩展性、可定制性以及性能优化等多方面的因素。微信小程序提供了一些现成的组件,如。
微信小程序 下拉刷新,tab切换 (源码)
微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换
微信小程序顶部导航栏滑动tab效果
主要为大家详细介绍了微信小程序顶部导航栏滑动tab效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
下拉刷新,tab切换
微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。



