、
Solution one:
If there are only image or view or button tags in the popup box, use cover-view and cover-image directly.
Solution two:
If there are other labels in the popup, such as input. The above scheme has disadvantages. The input will be covered and cannot be displayed normally. In view of this situation, the solution I adopt here is to convert the canvas to a picture display
I am using the vant component library here. The solution is to change the source code of the component, mainly by changing the index.js file.
index.js:、、
methods(){
//添加方法
getImage() {
const {
pixelRatio
} = wx.getSystemInfoSync();
const width = 130,
height = 130,
_this = this
_this.img = []
wx.createSelectorQuery().in(_this)
.select('#van-circle')
.node()
.exec(function (res) {
console.log("11",res[0])
wx.canvasToTempFilePath({
x: 0,
y: 0,
// 画布区域的高宽
width,
height,
// 生成图片的高宽 如果图片不清晰 需要增加pixelRatio
destWidth: width * pixelRatio,
destHeight: height * pixelRatio,
// 当前canvasid
canvasId: "van-circle",
// 导出图片类型
fileType: 'png',
// 如果当前canvas的type='2d' 需要指定当前canvas元素
// node可以通过 wx.createSelectorQuery
canvas: res[0].node,
success(imgRes) {
// 生成图片
_this.img.push(imgRes.tempFilePath)
_this.triggerEvent('getImg', imgRes)
console.log('imgRes.tempFilePath', _this.img);
},
fail(error) {
console.log(error);
}
},_this);
})
},
},
mounted(){
//调用这个方法
this.getImage()
}Called in the parent component
js: define two variables in dada: img1:null;
wxml:js
<view class="comprehensive-score">
<van-circle wx:if="{
{ !img1 }}" bindgetImg="getImg" value="{
{ total_score }}" text="{
{total_score}}"
stroke-width="8" layer-color="#F7F6F5" color="{
{gradientColor}}" />
<view class="inn" wx:else>
<text class="inntext">{
{ total_score }}</text>
<image mode="aspectFill" src="{
{ img1 }}"></image>
</view>
<text>综合得分</text>
</view>index.js:
methods: {
getImg(e) {
this.setData({ img1: e.detail.tempFilePath })
console.log("getImg",e.detail.tempFilePath)
}
}