公告列表
公告列表
收藏
回答

canvas中设置bindtouchstart后页面无法滑动


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


最后一次编辑于  2017-07-20
回答关注问题邀请回答
收藏

8 个回答

  • 晨
    晨
    2017-07-21

    你不是设置了  disable-scroll="true"  

    2017-07-21
    有用
    回复
  • 晨
    晨
    2017-07-21

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

    2017-07-21
    有用
    回复
  • 晨
    晨
    2017-07-20

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

    2017-07-20
    有用
    回复
  • Miss～木子
    Miss～木子
    2018-01-16

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


    2018-01-16
    有用
    回复
  • 快乐王
    快乐王
    2017-07-21

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

    2017-07-21
    有用
    回复
  • 快乐王
    快乐王
    2017-07-21

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


    2017-07-21
    有用
    回复
  • 快乐王
    快乐王
    2017-07-21

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

    <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"  就不可以，画图是从文档上扣的代码

    2017-07-21
    有用
    回复
  • 快乐王
    快乐王
    2017-07-21

    您好，我使用的开发工具与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://github.com/xiaolin3303/wx-charts。谢谢管理员


    2017-07-21
    有用
    回复
请 登录 后发表内容
相关文档