微信小程序的wx-charts插件-tab选项卡
2023-09-11 14:16:53 时间
微信小程序的wx-charts插件-tab选项卡
效果:
//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 点赞
相关文章
- 微信h5支付“网站域名ICP备案主体与商户号主体不一致”的解决方法,H5微信支付 授权函下载
- H5进阶篇--实现微信摇一摇功能
- 小程序官方文档解读:如何才能避免违反微信规则
- 微信小程序_简单组件使用与数据绑定
- 织梦企业官网小程序插件下载(支持百度小程序,微信小程序,支付宝小程序等)
- 关于微信小程序在ios中无法调起摄像头问题
- 微信小程序开发(十二)Promise将异步改为同步
- jsapi微信扫一扫
- 微信本地调试方法
- signalr 应用于微信小程序(二)
- [微信] 小程序
- Fragment实现微信Tab界面(不可通过界面左右拖动切换界面,只可以由按钮切换)
- uni-app:微信小程序:使用外部字体(hbuilderx 3.7.3)
- uni-app:微信小程序:保存图片到相册(hbuilderx 3.7.3)
- 【微信小程序】---- Promise.then(success, fail)执行顺序的问题
- 微信小程序----Grid(九宫格)(flex实现九宫格布局)
- 微信小程序----短信验证码倒计时插件
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----wx:key(Now you can provide attr "wx:key" for a "wx:for" to improve performance.)
- 微信小程序----map组件实现检索【定位位置】周边的POI
- 微信小程序实例系列
- Linux Ubuntu22.04 docker安装企业微信(docker安装方式,非纯deepin-wine)
- 推荐一款可以监控电脑软硬件和操作电脑的微信小程序,名叫HiPC
- 微信小程序登录流程总结 目录 1.1. 前端调用wx.login 。。给后端传递一个code1 1.2. 开发者需要在开发者服务器后台调用 auth.code2Session,使用 code 换取
- Java Web项目,Android和微信小程序的初始页面配置
- uniapp-微信小程序分包操作步骤详解
- 微信小程序怎样生成体验版二维码?微信小程序怎么转化为二维码?
- 微信小程序UI框架之【weui】怎样使用
- 微信小程序怎样上传代码到远程仓库
- 如何实现分享站点文章到微信朋友圈时指定缩略图
- 微信小程序开发学习笔记(二)——小程序框架、组件、WXML
- webstorm开发微信小程序
- 【课程分享】ASP.NET MVC5&微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)
- 微信小程序自动化测试实战,支持录制回放、智能遍历
- 【微信小程序】一文带你吃透开发中的常用组件
- IVX低代码平台开发——微信小程序实现抽奖功能
- 微信小程序开发入门教程-小程序账号注册及开通
- 微信小程序如何将二进制的数据流转为PNG图片
- 【taro react】---- 兼容微信小程序和H5的海报绘制插件
- 【taro react】---- 微信小程序 通过 Jenkins 实现自动化部署
- 微信小程序----开发rui-dtpicker多粒度日期组件