canvas中设置bindtouchstart后页面无法滑动
发布于 6 年前 作者 yong42 5370 次浏览 来自 问答

canvas中设置bindtouchstart后页面无法滑动，如图。当去掉设置的 bindtouchstart 后，就正常了，这个如何处理呢？我加bindtouchstart是为了点击每个点给出一个提示对应的XY周的值信息。这导致整个页面无法上下滑动。请求管理员帮助

8 回复

您好，我测试了下不行，代码如下：

<view class="container">
  <view class="" style="height:800px"></view>
  <canvas canvas-id="firstCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler" />
</view>

js代码：

onReady: function () {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')
 
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  },
touchHandler: function (e) {
    console.log(e);
  },

只要是加了 bindtouchstart=“touchHandler”  就不可以，画图是从文档上扣的代码

不用这个库会出现同样问题吗？你写一个简单的canvas试一下。

补充，如图：只是做了输出，在图片上点击，并不能使页面上下滑动。

 disable-scroll="{{false}}"  设置后解决了问题！ 

你不是设置了  disable-scroll=“true”  

你好 请教下 如何让折线图X轴随着左右滑动的canvas

您好，我使用的开发工具与iPhone6都试过不行，微信版本选得1.4.2；下面是我测试用的一个demo。谢谢管理员

代码如下：

<view class="container">
  <view class="" style="height:800px"></view>
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
  <button type="primary" bindtap="updateData">更新数据</button>
</view>

js代码：

var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var lineChart = null;
Page({
    data: {
    },
    touchHandler: function (e) {
      console.log(e);
         console.log(lineChart.getCurrentDataIndex(e));
        lineChart.showToolTip(e, {
            // background: '#7cb5ec'
        }); 
    },
    createSimulationData: function () {
        var categories = [];
        var data = [];
        for (var i = 0; i < 10; i++) {
            categories.push('2016-' + (i + 1));
            data.push(Math.random()*(20-10)+10);
        }
        // data[4] = null;
        return {
            categories: categories,
            data: data
        }
    },
    updateData: function () {
        var simulationData = this.createSimulationData();
        var series = [{
            name: '成交量1',
            data: simulationData.data,
            format: function (val, name) {
                return val.toFixed(2) + '万';
            }
        }];
        lineChart.updateData({
            categories: simulationData.categories,
            series: series
        });
    },
    onLoad: function (e) {
        var windowWidth = 320;
        try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }
         
        var simulationData = this.createSimulationData();
        lineChart = new wxCharts({
            canvasId: 'lineCanvas',
            type: 'line',
            categories: simulationData.categories,
            animation: true,
            background: '#f5f5f5',
            series: [{
                name: '成交量1',
                data: simulationData.data,
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }, {
                name: '成交量2',
                data: [11, 24, 29, 15, null, 21, 32, 23, 45, 21],
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }],
            xAxis: {
                disableGrid: true
            },
            yAxis: {
                title: '成交金额 (万元)',
                format: function (val) {
                    return val.toFixed(2);
                },
                min: 0
            },
            width: windowWidth,
            height: 200,
            dataLabel: false,
            dataPointShape: true,
            extra: {
                lineStyle: 'curve'
            }
        });
    }
});

其中 wxcharts.js代码

无法上传，显示超过20000了，这个是网上找的一个类库；地址：https://image.wxopen.club/content_c63bb6b0-3561-11ea-b236-a0999b08aadb.png。谢谢管理员

没有复现你的问题。请提供一下出现问题的机型和微信版本，并提供能复现问题的简单代码示例。bindtouchstart中是否进行了某些操作对页面滑动产生了影响？

回到顶部