• 小程序之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
  • 相关阅读:
    vue echarts 遇到的bug之一 无法渲染的问题
    前端SSR方案调研
    【读书笔记】数据结构与算法js描述-链表实现
    【转发】数组,字符串常用方法
    【转】README.md 语法汇总
    webpack 配置遇到的坑
    原生audio 实现音频播放器功能
    活动抽奖组件设计
    理解vue-loader
    kpi sql 积累
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/10997185.html
Copyright © 2020-2023  润新知