- 当前 Bug 的表现（可附上截图）
问题1、swiper中嵌套canvas会导致绘制的扇形图在swiper横向滑动时不跟随swiper-item一起动。知道swiper中不允许嵌套canvas，可是我们需要swiper这个横向滑动组件，也需要扇形图，那该怎么解决呢？
问题2、view高度大于手机屏幕，这时候右侧就会出现一个灰色滑动条，我该如何去掉呢？项目已基本完成，就差这几个难题了，跪求官方大佬指点。
- 预期表现
1、横向切换界面，扇形图一起横向滑动；2、去掉view右侧滑动条；
- 复现路径
- 提供一个最简复现 Demo
<-----------------prog-sector 组件js文件----------------------------->
// pages/componets/prog-sector.js/
Component({
/**
* 组件的属性列表
*/
properties: {
arrRates: {
type: Array,
value: [0.1, 0.2, 0.3, 0.4],
},
//环形颜色
arrC3b: {
type: Array,
// 红、蓝、绿、黄
value: [’#f1564d’, ‘#4175c9’, ‘#6fd73c’, ‘#ffb92f’],
},
},
/**
* 组件的初始数据
*/
data: {
radius: 25,
x: 50,
y: 50,
lineWidth: 50,
startAngle: 0,
},
/**
* 组件的方法列表
*/
methods: {
// 页面渲染完成后方可绘制
// 绘制圆环
drawSector: function() {
const ctx = wx.createCanvasContext(‘canvas’, this); //创建并返回绘图上下文context对象。
const args = this.data;
/* 开始一个新的路径
* 底部白色圆环，其它颜色圆环累计值小于360度时才能看到
*/
ctx.beginPath();
ctx.setLineCap(‘butt’)
ctx.setLineWidth(args.lineWidth);
ctx.setStrokeStyle(’#ffffff’);
ctx.arc(args.x, args.y, args.radius, this.angleToRadians(args.startAngle), 2 * Math.PI, false);
ctx.stroke(); //对当前路径进行描边
let curRad = this.angleToRadians(args.startAngle);
for (let i = 0; i < args.arrRates.length; i++) {
ctx.beginPath();
ctx.setLineWidth(args.lineWidth);
let nC3b = args.arrC3b.length;
let color = args.arrC3b[i % nC3b];
ctx.setStrokeStyle(color);
ctx.setLineCap(‘butt’)
let beganRad = curRad;
curRad += this.properties.arrRates[i] * Math.PI * 2;
ctx.arc(args.x, args.y, args.radius, beganRad, curRad, false);
ctx.stroke();
}
ctx.draw();
},
// 角度转弧度
angleToRadians: function(a) {
return a / 180.0 * Math.PI;
}
},
ready: function() {
// 绘图
this.drawSector();
},
})
<-----------------prog-sector 组件wxml文件----------------------------->
<!–pages/componets/prog-sector.wxml–>
<canvas class=“canvas” canvas-id=“canvas”></canvas>
<----------------main-view 页面wxml文件----------------------------->
<!–pages/views/main-view.wxml–>
<swiper style=‘width: 100%; height:2000px;’>
<swiper-item wx:for=’{{[1,2,3,4]}}’ wx:key=‘index’>
<view class=‘vwPageIdx’>page: {{index}}</view>
<block wx:for=’{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]}}’ wx:key=‘index’>
<view class=‘vwSectorRoot’>
<prog-sector class=‘prog-sector’></prog-sector>
</view>
</block>
</swiper-item>
</swiper>
<------------------------ main-view页面wxss文件----------------------->
/* pages/views/main-view.wxss */
.vwPageIdx {
width: 100%;
height: 33px;
font-size: 60rpx;
color: springgreen;
background-color: gray;
padding-top: 10rpx;
padding-bottom: 10rpx;
text-align: center;
line-height: 33px;
}
.vwSectorRoot {
display: flex;
width: 100%;
height: 260rpx;
margin-top: 10rpx;
padding-top: 23rpx;
flex-direction: column;
align-items: center;
}
.prog-sector {
width: 100px;
height: 150px;
}
截止到这里代码就贴完了，没贴的都是开发工具创建page页或component的默认代码，或者只有一两句很简单的代码。
强力驱动