微信小程序的wx-charts插件-tab选项卡

青旅半醒 2021-09-17 03:10 428阅读 0赞

微信小程序的wx-charts插件-tab选项卡  
![yangyan4.png][]

> 微信小程序的wx-charts插件-tab选项卡

效果:

![GIF.gif][]

//index.js
    var wxCharts = require('../../utils/wxcharts-min.js');
    const app = getApp();
    var ringChart = null;
    Page({
      data: {
        selected: true,
        selected1: false
      },
      torecord() {
        wx.navigateBack({
          delta: 1,
        })
      },
      onLoad: function (e) {
        //  高度自适应
        var windowWidth = '', windowHeight = '';    //定义宽高
        try {
          var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据
          windowWidth = res.windowWidth / 750 * 690;   //以设计图750为主进行比例算换
          windowHeight = res.windowWidth / 750 * 550    //以设计图750为主进行比例算换
        } catch (e) {
          console.error('getSystemInfoSync failed!');   //如果获取失败
        }
        ringChart = new wxCharts({
          canvasId: "ringCanvas",
          type: "ring",
          series: [
            { data: 20, },
            { data: 30, },
            { data: 60, }
          ],
          width: windowWidth,
          height: windowHeight,
          dataLabel: false,
          legend: false,
        });
      },
    
      selected: function (e) {
        this.setData({
          selected1: false,
          selected: true
        })
      },
    
      selected1: function (e) {
        this.setData({
          selected: false,
          selected1: true
        })
      }
    })

<view class="head">
      <view class="head_item {
       {selected?'head_itemActive':''}}" bindtap="selected">个人</view>
      <view class="ring"></view>
      <view class="head_item {
       {selected1?'head_itemActive':''}}" bindtap='selected1'>设置</view>
    </view>
    <view class="main {
       {selected?'show':'hidden'}}">
      <canvas canvas-id="ringCanvas" disable-scroll="true" class="canvas"></canvas>
      <cover-view class='text'>
       黄
      </cover-view>
    </view>
    <view class="main {
       {selected1?'show':'hidden'}}">
      <text>for sutdnet month attend</text>
    </view>

page {
      background-color: rgba(239, 239, 240, 1);
    }
    
    .text {
      position: absolute;
      top: 380rpx;
      left: 356rpx;
    }
    
    .canvas {
      width: 100%;
      height: 550rpx;
      margin: 30rpx;
    }
    
    .head_item {
      width: 374rpx;
      text-align: center;
      font-size: 34rpx;
      color: #999;
      letter-spacing: 0;
    }
    
    .head_itemActive {
      color: rgba(87, 213, 200, 1);
    }
    
    .ring {
      width: 2rpx;
      height: 100%;
      background-color: rgba(204, 204, 204, 1);
    }
    
    .head {
      width: 100%;
      height: 100rpx;
      background-color: rgba(255, 255, 255, 1);
      border-bottom: 1rpx solid rgba(204, 204, 204, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      top: 0;
      z-index: 10;
    }
    
    .main {
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      box-sizing: border-box;
      padding-top: 100rpx;
      top: 0;
    }
    
    .show {
      display: block;
      text-align: center;
    }
    
    .hidden {
      display: none;
      text-align: center;
    }

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[yangyan4.png]: /images/20210724/4d9a1f15e3924884bc5f709fe173374b.png
[GIF.gif]: /images/20210724/d951fe4ffefc403f8b88ce412a542ef8.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1