设置背景颜色就直接在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页的图表中加上一个条件，只有当currentTab为1时也就是只有在切换到当前页面时该页面的图表才会加载。然后就顺利解决啦~

微信小程序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
        });
    }
})

之前没有怎么做过小程序，最近公司需要刚上来就做图表，这对于我来说是一个挑战。 

在没做之前觉得没什么，但是后来有一个很大的bug。就是在做Tab切换的时候，我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面，不会随着页面进行移动。 

结果发现swiper和scroll-view标签下面不能用canvas，这才明白。然后就改用了普通的标签。

这里用的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 

    }) 

  } 

})

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