百度云盘->春稻田小程序->pages/community/index/index
案例分析:
tab1,tab2,内层都有list,有分页
tab1比如滑动到sTop800得时候,切换到tab2,会发现tab2也是stop800;
所以换了布局方案,内容页用swiper以解决
page{ background:#f5f4f4; } .body{ background:#fff; } .section{ padding-left:30rpx; } .weui-navbar{ position: fixed; top: 0; left: 0; background: #fff; } .scoll-h { height: 100%; background:#fff; } .tab-content{ padding-top: 100rpx; } .zx-section{ padding-left: 30rpx; } .dt-section{ padding: 0 30rpx; }
css
<import src="/templates/index.wxml" /> <view class='body'> <view class="weui-navbar"> <block wx:for="{{tabs}}" wx:key="*this"> <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"> <view class="weui-navbar__title">{{item}}</view> </view> </block> <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view> </view> <swiper class="tab-content" current="{{activeIndex}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx"> <swiper-item style="height:100%"> <scroll-view style="height:100%" bindscrolltolower="scrolltolower" scroll-y="true" class="scoll-h"> <view class='zx-section' wx:for="{{list}}" wx:key="*this"> <template is="zxzx" data="{{item}}" /> </view> <view wx:if="{{finish}}" class='tem-finish'> <view class='tem-tuij tem-finish2'> <view class='tem-tuij-linec'>没有数据了</view> </view> </view> </scroll-view> </swiper-item> <swiper-item style="height:100%"> <scroll-view style="height:100%" bindscrolltolower="scrolltolower" scroll-y="true" class="scoll-h"> <view wx:for="{{list2}}" wx:key="*this" class='dt-section' > <template is="zxdt" data="{{item}}" /> </view> <view wx:if="{{finish2}}" class='tem-finish'> <view class='tem-tuij tem-finish2'> <view class='tem-tuij-linec'>没有数据了</view> </view> </view> </scroll-view> </swiper-item> </swiper> </view>
js
// pages/community/index/index.js var app = getApp(); var host = app.data.server; var utils = require('../../../utils/util.js') Page({ /** * 页面的初始数据 */ data: { activeIndex: 0, sliderOffset: 0, tabs: ["最新资讯", "最新动态"], page: 1, finish: false, page2: 1, finish2: false, keyword: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; var width = wx.getSystemInfoSync().windowWidth; var height = wx.getSystemInfoSync().windowHeight; var heightrpx = height * (750 / width); this.setData({ winHeight: heightrpx - 80 }) this.setData({ sliderLeft: 48.75, }) this.getData() this.getData2() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, getData: function () { var that = this; utils.loading("正在加载"); wx.request({ url: host + '/getNewsList.json', method: 'GET', data: { userid: wx.getStorageSync('userid'), apptype: 0, size: 10, page: that.data.page, seq: 0, search: that.data.keyword, }, success: function (res) { if (res.statusCode == 200) { var d = res.data.data; if (d.length < 10) { that.setData({ finish: true }) } if (that.data.page > 1) { d = that.data.list.concat(d); } console.log(d); that.setData({ list: d, }); } else { utils.alert("抱歉", '服务器出错(' + res.statusCode + ')'); } }, fail: function () { utils.alert('提示', '数据请求失败,请稍候再试!'); }, complete: function () { utils.hideLoading(); } }) }, getData2: function () { var that = this; utils.loading("正在加载"); wx.request({ url: host + '/getShare.json', method: 'GET', data: { userid: wx.getStorageSync('userid'), apptype: 0, size: 10, page: that.data.page2, filter: 0, }, success: function (res) { if (res.statusCode == 200) { var d = res.data.data; for (let i = 0; i < d.length; i++) { var time = utils.times(d[i].updatetime); d[i].updatetime = time; } if (d.length < 10) { that.setData({ finish2: true }) } if (that.data.page2 > 1) { d = that.data.list2.concat(d); } that.setData({ list2: d, }); } else { utils.alert("抱歉", '服务器出错(' + res.statusCode + ')'); } }, fail: function () { utils.alert('提示', '数据请求失败,请稍候再试!'); }, complete: function () { utils.hideLoading(); } }) }, tabClick: function (e) { this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: e.currentTarget.id }); }, clickHrefzx(e){ var id = e.currentTarget.dataset.id; var url = `${host}/newsApp.html`; console.log(url); wx.navigateTo({ url: `/pages/webView/index?url=${url}&id=${id}`, }) }, clickHrefDtDetails(e){ var list2Deta = e.currentTarget.dataset.list2deta; wx.navigateTo({ url: '/pages/community/details/index?list2Deta=' + JSON.stringify(list2Deta), }) console.log(list2Deta); }, clickDtShare(e){ var that = this; var id = e.currentTarget.dataset.id; console.log(id); utils.loading("正在加载"); wx.request({ url: host + '/addSharePraise.json', method: 'GET', data: { userid: wx.getStorageSync('userid'), apptype:0, shareid: id, }, success: function (res) { if (res.statusCode == 200) { if(res.data.code == 0){ wx.showToast({ title: '已点赞', duration: 2000 }); that.getData2(); }else{ // wx.showToast({ // title: res.data.message, // duration: 2000 // }); } } else { utils.alert("抱歉", '服务器出错(' + res.statusCode + ')'); } }, fail: function () { utils.alert('提示', '数据请求失败,请稍候再试!'); }, complete: function () { utils.hideLoading(); } }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, scrolltolower: function () { var activeIndex = this.data.activeIndex; console.log(this.data.activeIndex); if (activeIndex == 0) { if (!this.data.finish) { this.setData({ page: this.data.page + 1 }) this.getData(); } } else { if (!this.data.finish2) { this.setData({ page2: this.data.page2 + 1 }) this.getData2(); } } }, })