双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —

微信小程序tab切换,滑动点击切换后获取到内容怎么上拉加载更多下拉刷新呢?

it0_soft it0_soft 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我利用swiper做的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切换可滑动切换导航栏跟随滚动实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

weixin_38663169

构建微信小程序的可滑动Tab视图

在微信小程序的开发中,滑动tab视图是一个常见的需求,主要用来在不同的页面或视图之间进行快速切换。用户通过滑动手指轻松地浏览不同的信息分类,它不仅提升了用户体验,还增加了界面的美观度。随着用户对界面流畅性和操作便捷性的要求日益提高,一个能够平滑响应用户操作的滑动tab视图成为了衡量小程序性能的重要指标。然而,这个需求的实现并非一蹴而就。开发者需要考虑到tab视图的可扩展性、可定制性以及性能优化等多方面的因素。微信小程序提供了一些现成的组件,如。

BIG-HO

微信小程序 下拉刷新,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切换

大富大贵7

微信小程序顶部导航栏滑动tab效果

主要为大家详细介绍了微信小程序顶部导航栏滑动tab效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

weixin_38555304

下拉刷新,tab切换

微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。

热心网友!
评论 11
收藏 已收藏
分享
返回顶部
it0_soft
微信开发 3,161 成员 3,828 内容