微信小程式的wx-charts外掛-tab選項卡
摘要：
yangyan4.png
微信小程式的wx-charts外掛-tab選項卡
效果:
GIF.gif
//index.js
var wxCharts = require('../../util...
yangyan4.png
效果:
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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： ofollow,noindex">https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊