Does any boss know how to solve the confusion of using canvas style in Mini Program swiper?

problem description

the canvas style in Mini Program swiper is out of order, and the computer is normal, but it makes a mistake when it is put on the mobile phone

wxml

<!-- pages/index/test.wxml -->
<view>
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
        <view class="tab-item {{currentTab==0?"active":""}}" data-current="0" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==1?"active":""}}" data-current="1" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==2?"active":""}}" data-current="2" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==3?"active":""}}" data-current="3" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==4?"active":""}}" data-current="4" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==5?"active":""}}" data-current="5" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==6?"active":""}}" data-current="6" bindtap="swichNav">
            
        </view>
        <view class="tab-item {{currentTab==7?"active":""}}" data-current="7" bindtap="swichNav">
            
        </view>
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}" wx:key="*this">
            <!-- <scroll-view scroll-y="true" class="scoll-h" >
                <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
                    <view class="item-ans">
                        <view class="avatar">
                            <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
                        </view>
                        <view class="expertInfo">
                            <view class="name"></view>
                            <view class="tag"></view>
                            <view class="answerHistory">1342234 </view>
                        </view>
                        <navigator url="/pages/askExpert/expertDetail" class="askBtn">TA</navigator> 
                    </view>
                </block>
            </scroll-view> -->
            <view class="wrap">
                <view class="top">
                    <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc-{{item}}"></canvas>
                    <view class="cc"></view>
                </view>
            </view>
        </swiper-item>
    </swiper>
</view>

js

var app = getApp();
Page({
    data: {
        winHeight: "",//
        currentTab: 0, //
        scrollLeft: 0, //tab
        expertList: [{ //
            img: "avatar.png",
            name: "",
            tag: "",
            answer: 134,
            listen: 2234
        }]
    },
    // 
    switchTab: function (e) {
        this.setData({
            currentTab: e.detail.current
        });
        this.checkCor();

        function createCanvas(id) {
            // 
            var cxt_arc = wx.createCanvasContext("canvasArc-"+id);//context
            cxt_arc.setLineWidth(6);
            cxt_arc.setStrokeStyle("-sharpd2d2d2");
            cxt_arc.setLineCap("round")
            cxt_arc.beginPath();//
            cxt_arc.arc(106, 106, 100, 0, 2 * Math.PI, false);//(106,106)100
            cxt_arc.stroke();//

            cxt_arc.setLineWidth(6);
            cxt_arc.setStrokeStyle("-sharp3ea6ff");
            cxt_arc.setLineCap("round")
            cxt_arc.beginPath();//
            cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI * 6 / 5, false);
            cxt_arc.stroke();//

            cxt_arc.draw();
        }

        setTimeout(() => {
            createCanvas(e.detail.current)
        }, 2000);
        
    },
    // 
    swichNav: function (e) {
        var cur = e.target.dataset.current;
        if (this.data.currentTaB == cur) { return false; }
        else {
            this.setData({
                currentTab: cur
            })
        }
    },
    //tab
    checkCor: function () {
        if (this.data.currentTab > 4) {
            this.setData({
                scrollLeft: 300
            })
        } else {
            this.setData({
                scrollLeft: 0
            })
        }
    },
    onLoad: function () {
        var that = this;
        //  
        wx.getSystemInfo({
            success: function (res) {
                var clientHeight = res.windowHeight,
                    clientWidth = res.windowWidth,
                    rpxR = 750 / clientWidth;
                var calc = clientHeight * rpxR - 180;
                console.log(calc)
                that.setData({
                    winHeight: calc
                });
            }
        });
    },
    onReady: function () {
        [0,1,2,3,4,5,6,7].forEach(el => {
            // createCanvas(el);
        });

        function createCanvas(id) {
            // 
            var cxt_arc = wx.createCanvasContext("canvasArc-"+id);//context
            cxt_arc.setLineWidth(6);
            cxt_arc.setStrokeStyle("-sharpd2d2d2");
            cxt_arc.setLineCap("round")
            cxt_arc.beginPath();//
            cxt_arc.arc(106, 106, 100, 0, 2 * Math.PI, false);//(106,106)100
            cxt_arc.stroke();//

            cxt_arc.setLineWidth(6);
            cxt_arc.setStrokeStyle("-sharp3ea6ff");
            cxt_arc.setLineCap("round")
            cxt_arc.beginPath();//
            cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI * 6 / 5, false);
            cxt_arc.stroke();//

            cxt_arc.draw();
        }
        

    },
    footerTap: app.footerTap
})

wxss

/* pages/index/test.wxss */
.tab-h{
    height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: -sharpF7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: -sharp4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: -sharp4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid -sharpF2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: -sharpB0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:-sharp000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid -sharp4675F9; color:-sharp4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}



.cir{
    display: inline-block;
    margin-top: 20rpx;
   
  }
   
  .top{
    text-align: center
  }
   
  .cc{
    
    margin-top: -120px;
    
  }

ask for help to run and see how to solve ~

Apr.07,2021

your mistake can only be solved by others to run it on their own. Who has the spare time to build a Mini Program project in the developer tool to help you?
suggest how you handle it first, and how to do it after a failed attempt so that others can help you effectively and save time.


help if you want to; don't bb if you don't want to.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bec97c-31290.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bec97c-31290.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?