专栏首页达达前端微信小程序的wx-charts插件-tab选项卡

微信小程序的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

结语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 购物车

    达达前端
  • 小程序标签页切换效果

    达达前端
  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • 小程序搜索弹出搜索内容功能(模糊查询)

    祈澈菇凉
  • 购物车

    达达前端
  • wepy代码知识点

    达达前端
  • PHP敏感函数关闭参考

    搜索disable_functions 然后改为=disable_functions=phpinfo,dl, exec, system,passthru,pop...

    苦咖啡
  • 工具篇 | “X系列软件的替代方案”

    里面提到里X_Server的几款工具分别是xshell、xftp、xpassive

    LogicPanda
  • C# 使用相同权限调用 cmd 传入命令

    如果想要用相同的权限运行一个程序,可以使用 ProcessStartInfo 的方法

    林德熙
  • 测试思想-测试流程 软件测试版本管理

    说明:很早之前写过一篇文章“软件测试版本管理与版本发布”,之前作者也按文章中所述执行过,但是随着工作经历的增加,对代码管理认识的加深,发现还是有不足的地方,特...

    授客

扫码关注云+社区

领取腾讯云代金券