小程序之tabbar切换,a页面得滚动高度会影响到b页面,列表分页得时候很明显(前端网备份)

百度云盘->春稻田小程序->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;
}
View Code

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>
View Code

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();
      }
    }

  },

})
View Code

 

posted @ 2019-06-10 13:29  影思密达ing  阅读(570)  评论(0编辑  收藏  举报