精华内容
下载资源
问答
  • 微信小程序 tab切换

    千次阅读 2018-01-17 09:30:27
    设置背景颜色就直接在page里设置 page {...tab切换: navigator 页面链接 传参的格式为url="路径?title={{item.title}}" 多个用&&连接 下个页面接收参数: wxml: view class="container

    设置背景颜色就直接在page里设置    page {background-color: rgb(242, 242, 242);}

    tab切换:

    navigator 页面链接

    传参的格式为url="路径?title={{item.title}}"   多个用&&连接

    下个页面接收参数:

    wxml:

    复制代码
    <view class="container">
      <view class="swiper-tab">
        <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">进行中</view>
        <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已完成</view>
      </view>
      <swiper current="{{currentTab}}" class="swiper-box" duration="800" style="height:{{winHeight - 71}}px" bindchange="bindChange">
    
        <!-- 朴智妍一 -->
        <swiper-item>
          <view class="content" wx:for="{{loadingList}}" wx:key="id" >
            <navigator bindtap="bindIndexId" data-index-id="{{item.id}}" url="../..?act_name={{item.act_name}}&&pro_name={{item.pro_name}}">   
              <image src="{{item.act_pic}}"></image>
              <view class="txt1">{{item.act_name}}</view>
              <view>{{item.pro_name}}</view>
            </navigator>
          </view>
          <view class="hb" bindtap="addProject">
            <image src="../Image/addT.png" style="width:30rpx;height:30rpx;float:left;margin-top:3rpx;margin-right:16rpx;"></image>
            <view class="text2">添加项目</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    复制代码

    wxss:

    复制代码
    page {
      background-color: rgb(242, 242, 242);  /*设置背景颜色就直接在page里设置*/
    }
    
    .container {
      width: 100%;
    }
    
    .swiper-tab {
      width: 84%;
      text-align: center;
      line-height: 60rpx;
      margin-top: 40rpx;
      margin-bottom: 20rpx;
      border: 2rpx solid #1c7bf3;
      border-radius: 6rpx;
    }
    
    .swiper-tab-list {
      font-size: 28rpx;
      display: inline-block;
      width: 50%;
      float: left;
      color: #1c7bf3;
    }
    
    .on {
      color: #fff;
      background-color: #1c7bf3;
      box-shadow: 0 0 20rpx #d1e5fd;
    }
    
    .swiper-box {
      display: block;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
    image {
      width: 140rpx;
      height: 140rpx;
      display: inline-block;
      overflow: hidden;
      border-radius: 100%;
      float: left;
      margin-top: 36rpx;
      margin-left: 26rpx;
      margin-right: 30rpx;
    }
    
    .content {
      width: 94%;
      height: 220rpx;
      box-shadow: 0 0 20rpx #bbb;
      margin: auto;
      margin-top: 22rpx;
      line-height: 220rpx;
      font-size: 32rpx;
      margin-left: 3%;
      background: #fff;
      border-radius: 8rpx;
    }
    
    .content>view {
      float: left;
    }
    
    .txt1 {
      color: #ff5438;
    }
    
    .hb {
      text-align: center;
      margin-top:70rpx;
      font-size: 28rpx;
      width: 100%;
      margin-left:36%;
    }
    
    .text2 {
      color: #bbb;
      float: left;
    }
    
    view {
      display: inline-block;
    }
    复制代码

    js:

    复制代码
    /*获取系统信息*/
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              winWidth: res.windowWidth,
              winHeight: res.windowHeight
            });
          }
        })
      },
    
      /**  滑动切换tab  **/
      bindChange: function (e) {
        var that = this;
        that.setData({ currentTab: e.detail.current });
    
      },
      /**  点击tab切换  **/
      swichNav: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },
    复制代码
    var app = getApp()
    Page({
      data: {
        winWidth: 0,  /* 页面配置*/
        winHeight: 0,
        currentTab: 0,   // tab切换  
        oneList: [{     //遍历数组,前台需要请求遍历的参数
          id: '',
          act_pic:'',
          act_name: '',
          pro_name: '',
        }],
      },
    //获取点击的产品ID,并保存在本地缓存   (进行中)
      bindIndexId: function (e) {
        var indexId = e.currentTarget.dataset.indexId
        wx.setStorageSync('indexId', indexId)
      },
    onLoad: function () {
        var that = this;
        var tokend = wx.getStorageSync('tokend') //取token
        //刷新页面后得到进行中的数据
        wx.request({
          method: 'GET',
          url: 'https://....?token=' + tokend,
          header: {'content-type': 'application/json'},
          data: {},
          success: function (res) {  // success
           console.log(res)
            that.setData({     //将后台数值与前台数组匹配(集合)
              loadingList: res.data.data
            })
          }
        });
    复制代码
    复制代码
    展开全文
  • 今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题: 页面完成加载,显示正常 tab切换,该页面的图表缩成了一坨 ...

    今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题:

    • 页面完成加载,显示正常
      在这里插入图片描述
    • tab切换,该页面的图表缩成了一坨
      在这里插入图片描述

    解决方法:
    在这里插入图片描述
    在第二个tab页的图表中加上一个条件,只有当currentTab为1时也就是只有在切换到当前页面时该页面的图表才会加载。然后就顺利解决啦~
    在这里插入图片描述

    展开全文
  • 主要介绍了微信小程序实现tab页面切换功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现简介解决过程 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 ...

    微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介

    看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能

    像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论

    解决过程

    1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用标签,内容使用,其中的使用方法和参数希望自行参考api文档,不过多解释

    布局代码如下:

    wxml:

    <view class="container">
        <!-- tab导航栏 -->
        <!-- scroll-left属性可以控制滚动条位置 -->
        <!-- scroll-with-animation滚动添加动画过渡 -->
        <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">
    				<text>{{navItem}}</text>
    		</view>
            </block>        
        </scroll-view>
        <!-- 页面内容 -->
        <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">        
            <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
                {{tabItem}}
            </swiper-item>
        </swiper>
    </view>
    

    wxss:

    /**index.wxss**/
    page{
        width: 100%;
        height: 100%;
    }
    .container{
        width: 100%;
        height: 100%;
    }
    .nav {
        height: 80rpx;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 80rpx;
        background: #f7f7f7;
        font-size: 16px;
        white-space: nowrap;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .nav-item {
        width: 20%;
        display: inline-block;
        text-align: center;
    }
    .nav-item.active{
        color: red;
    }
    .tab-box{
        background: greenyellow;
        padding-top: 80rpx;
        height: 100%;
        box-sizing: border-box;
    }
    .tab-content{
        overflow-y: scroll;
    }
    

    js:

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
        data: {
            motto: 'Hello World',
            userInfo: {},
            hasUserInfo: false,
            canIUse: wx.canIUse('button.open-type.getUserInfo'),
            navData:['精选','男生','女生','图书','听书','漫画','VIP','免费'],
            currentTab: 0,
            navScrollLeft: 0
        },
        //事件处理函数
        onLoad: function () {
            if (app.globalData.userInfo) {
                this.setData({
                    userInfo: app.globalData.userInfo,
                    hasUserInfo: true
                })
            } else if (this.data.canIUse) {
                // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                app.userInfoReadyCallback = res => {
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            } else {
                // 在没有 open-type=getUserInfo 版本的兼容处理
                wx.getUserInfo({
                    success: res => {
                        app.globalData.userInfo = res.userInfo
                        this.setData({
                            userInfo: res.userInfo,
                            hasUserInfo: true
                        })
                    }
                })
            }
    
    
            wx.getSystemInfo({
                success: (res) => {
                    this.setData({
                        pixelRatio: res.pixelRatio,
                        windowHeight: res.windowHeight,
                        windowWidth: res.windowWidth
                    })
                },
            })       
        },
        switchNav(event){
            var cur = event.currentTarget.dataset.current; 
            //每个tab选项宽度占1/5
            var singleNavWidth = this.data.windowWidth / 5;
            //tab选项居中                            
            this.setData({
                navScrollLeft: (cur - 2) * singleNavWidth
            })      
            if (this.data.currentTab == cur) {
                return false;
            } else {
                this.setData({
                    currentTab: cur
                })
            }
        },
        switchTab(event){
            var cur = event.detail.current;
            var singleNavWidth = this.data.windowWidth / 5;
            this.setData({
                currentTab: cur,
                navScrollLeft: (cur - 2) * singleNavWidth
            });
        }
    })
    
    展开全文
  • 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我...
  • 微信小程序Tab切换下面的图表显示

    千次阅读 2018-09-16 17:03:37
    就是在做Tab切换的时候,我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面,不会随着页面进行移动。 结果发现swiper和scroll-view标签下面不能用canvas,这才明白。然后就改用了普通的标签。 这里用的show...

    之前没有怎么做过小程序,最近公司需要刚上来就做图表,这对于我来说是一个挑战。
    在没做之前觉得没什么,但是后来有一个很大的bug。就是在做Tab切换的时候,我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面,不会随着页面进行移动。
    结果发现swiperscroll-view标签下面不能用canvas,这才明白。然后就改用了普通的标签。

    这里用的show、hidden隐藏显示
    这里用的show、hidden隐藏显示

    结果如下:切换完之后第二页的图表进行了压缩。看了一下尺寸也没有错啊,到现在也没搞明白怎么回事。于是就换了另一种方式wx:if进行显示和隐藏。把wxml里面注释的内容解开就可以了。把另一个用hidden进行切换的进行注释。


    JS:
    import * as echarts from ‘../../ec-canvas/echarts’;
    const app = getApp();
    function initChart(canvas,width,height){
    const chart = echarts.init(canvas,null,{
    width:width,
    height:height
    });
    canvas.setChart(chart);
    var option = {
    color: [“#37A2DA”, “#67E0E3”, “#9FE6B8”],
    legend: {
    data: [‘A’, ‘B’, ‘C’],
    top: 10,
    left: ‘center’,
    backgroundColor: ‘red’,
    z: 100
    },
    grid: {
    containLabel: true
    },
    tooltip: {
    show: true,
    trigger: ‘axis’
    },
    xAxis: {
    type: ‘category’,
    boundaryGap: false,
    data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’],
    // show: false
    },
    yAxis: {
    x: ‘center’,
    type: ‘value’,
    splitLine: {
    lineStyle: {
    type: ‘dashed’
    }
    }
    // show: false
    },
    series: [{
    name: ‘A’,
    type: ‘line’,
    smooth: true,
    data: [18, 36, 65, 30, 78, 40, 33]
    }, {
    name: ‘B’,
    type: ‘line’,
    smooth: true,
    data: [12, 50, 51, 35, 70, 30, 20]
    }, {
    name: ‘C’,
    type: ‘line’,
    smooth: true,
    data: [10, 30, 31, 50, 40, 20, 10]
    }]
    };

    chart.setOption(option);
    return chart;
    }
    function initChart1(canvas, width, height) {
    const chart1 = echarts.init(canvas, null, {
    width: width,
    height: height
    });
    canvas.setChart(chart1);

    var option = {
    color: [‘#37a2da’, ‘#32c5e9’, ‘#67e0e3’],
    tooltip: {
    trigger: ‘axis’,
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
    type: ‘shadow’ // 默认为直线,可选为:’line’ | ‘shadow’
    }
    },
    legend: {
    data: [‘热度’, ‘正面’, ‘负面’]
    },
    grid: {
    left: 15,
    right: 20,
    bottom: 15,
    top: 40,
    containLabel: true
    },
    xAxis: [
    {
    type: ‘value’,
    axisLine: {
    lineStyle: {
    color: ‘#999’
    }
    },
    axisLabel: {
    color: ‘#666’
    }
    }
    ],
    yAxis: [
    {
    type: ‘category’,
    axisTick: { show: false },
    data: [‘汽车之家’, ‘今日头条’, ‘百度贴吧’, ‘一点资讯’, ‘微信’, ‘微博’, ‘知乎’],
    axisLine: {
    lineStyle: {
    color: ‘#999’
    }
    },
    axisLabel: {
    color: ‘#666’
    }
    }
    ],
    series: [
    {
    name: ‘热度’,
    type: ‘bar’,
    label: {
    normal: {
    show: true,
    position: ‘inside’
    }
    },
    data: [300, 270, 340, 344, 300, 320, 310],
    itemStyle: {
    // emphasis: {
    // color: ‘#37a2da’
    // }
    }
    },
    {
    name: ‘正面’,
    type: ‘bar’,
    stack: ‘总量’,
    label: {
    normal: {
    show: true
    }
    },
    data: [120, 102, 141, 174, 190, 250, 220],
    itemStyle: {
    // emphasis: {
    // color: ‘#32c5e9’
    // }
    }
    },
    {
    name: ‘负面’,
    type: ‘bar’,
    stack: ‘总量’,
    label: {
    normal: {
    show: true,
    position: ‘left’
    }
    },
    data: [-20, -32, -21, -34, -90, -130, -110],
    itemStyle: {
    // emphasis: {
    // color: ‘#67e0e3’
    // }
    }
    }
    ]
    };

    chart1.setOption(option);
    return chart1;
    }

    Page({
    data:{
    ec: {
    onInit: initChart
    },
    ecA: {
    onInit: initChart1
    },
    clickTab:true,
    clickTab1:false,
    },
    clickTab: function(e){
    var that = this;
    that.setData({
    clickTab: true,
    clickTab1: false
    })
    },
    clickTab1: function (e) {
    console.log(1111111);
    var that = this;
    that.setData({
    clickTab: false,
    clickTab1: true
    })
    }
    })

    这样的话就可以正常显示了

    这里写图片描述

    展开全文
  • 这个问题困扰了我几天,在小程序中运用tab页面切换,但是只在第三个tab页有用到Echarts图表: 当切换至第三页时就出现了下面的情况,图表缩成一团: 解决方法就是在图表外层的view上面加上条件,代码如下: <...
  • tab-bar常用作微信小程序切换页面。常见首页页面下面有“首页”,“详情”,“我的”三个按钮。我们点击按钮实现跳转到按钮相对应的页面。其中我们利用tab-bar中的wx.switchTab来实现无刷新跳转。这种方法跳转的...
  • -- 页面内容 --> <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for-item="0" wx:for-index="0" class="tab-content"> 0 ...
  • 微信小程序-tab切换

    2018-09-06 08:23:17
    tabBar的作用:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 tabBar的属性中 list 接受一个数组,...
  • 微信小程序点击页面tab切换 wxml <view class="container"> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == ...
  • 微信小程序tab切换后执行onload

    千次阅读 2019-08-12 11:19:31
    小程序tab切换后,不会执行onload操作,那么我们在某tab列表进入详情后,再次返回列表,需要重新刷新页面,该如何处理? 方法一: wx.switchTab({ url: '../index/index', success: function(e) { var page = ...
  • 微信小程序页面tab切换问题

    千次阅读 2018-10-11 17:50:03
    在wxml页面的代码是这样的 上面的tab选项 笔记 关于我 收藏 活动 选项对应的内容 只是举例 所有笔记 更多 在js页面的代码 data:{ tabArr: { currentId: 1, currentBdid: 1 }, } ...
  • 小程序tab切换后,不会执行onload操作,那么我们在某tab列表进入详情后,再次返回列表,需要重新刷新页面,该如何处理? 代码如下: 在调用wx.switchTab后,通过success操作,调用getCurrentPages().pop()...
  • 竖版的tab,点击切换页面,代码如下: wxml: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"><text>最热</...
  • 微信小程序选项卡页面切换

    万次阅读 2018-01-31 21:13:37
    最近搞了个微信小程序切换的demo,有点像头条的那个,我给你大家分享下。 代码如下: index.wxml view class='topTabSwiper'> view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0...
  • 微信小程序切换tab时动画执行问题

    千次阅读 2017-11-07 16:32:55
    微信小程序的开发和H5开发有很多差异。当页面内有“打开”“收起”这样的往复动画的时候,我们一般使用类名来控制动画,然后在js的事件中去改变类名。如下图。 这样做的效果还是不错的,但是,如果当页面中有...
  • 微信小程序 自定义Tab

    2021-04-20 11:03:26
    需求:微信小程序页面顶部增加Tab栏功能,方便切换功能模块。 开始: 首先生成微信小程序开发项目文件,同时打算将其Tab功能封装成组件,方便后续项目复用。 所以将其代码放在小程序项目文件下面的components下。 ...
  • 微信小程序tab之间的切换 js var tabs = [ { name: "玄幻" }, { name: "都市" }, { name: "言情" }, { name: "武侠" } ]; Page({ /** * 页面的初始数据 */ data: { tabs: tabs, //展示的数据.....
  • tab之间的切换逻辑已处理. 使用时需要做的: 拷贝 netUtil.js拷贝到utils目录下 lib文件夹拷贝到根目录下 修改 针对具体项目微调netUtil里的一些字段,比如将用于分批加载的pagesize和pageIndex改成自己网络请求里的...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 276
精华内容 110
关键字:

微信小程序tab切换页面

微信小程序 订阅