sbfkcel / towxml

微信小程序HTML、Markdown渲染库
https://github.com/sbfkcel/towxml/wiki
2.47k stars 313 forks source link

长按监听应该如何操作? #261

Closed fuxi3344 closed 1 year ago

fuxi3344 commented 1 year ago

我在config.js中找到以下代码(config.js路径为towxml根目录)

// 事件绑定方式(catch或bind),catch 会阻止事件向上冒泡。更多请参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
    bindType:'bind',

    // 需要激活的事件
    events:[
        'touchstart',
        //'touchmove',
        //'touchcancel',
        'touchend',
        'tap',                      // 用于元素的点击事件
        'change',                   // 用于todoList的change事件
    ],

我打开了touchstarttouchend,期望来判断是否属于长按

let result = e.towxml(MDText, 'markdown', {
            base: e.globalData.baseUrl,             // 相对资源的base路径
            events: {                    // 为元素绑定的事件方法
                touchend: (e) => {
                    console.log(e)
                },
                touchstart: (e) => {
                    console.log(e)
                },
                tap: (e) => {
                    console.log(e)
                }
            }
        });

但是只有tap在输出信息,touchstarttouchend并没有任何信息 我又来回修改了bindType的值bindcatch,但依然不行。

我不知道是不是我的操作有问题,如果有朋友解决了请告知一下,万分感谢

fuxi3344 commented 1 year ago

看到这篇文章受到启发 towxml支持代码复制功能(支持uni-app) 在根目录下的decode.wxml文件,第5行有说明定义了tap事件

<view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap">

于是我修改了一下在最后加上了longpress,改为

<view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap" catch:longpress="_longpress">

接着第11行也改为了

<view data-data="{{item}}" class="{{item.attrs.class}}" data="{{item.attrs.data}}" id="{{item.attrs.id}}" style="{{item.attrs.style}}" catch:tap="_tap" catch:longpress="_longpress">

继续在根目录的config.jsevents添加一个longpress

events:[
        'longpress',
        'tap',                      // 用于元素的点击事件
        'change',                   // 用于todoList的change事件
    ],

最后,使用方法

loadMD: function (MDText) {
        //markdown数据源
        let result = e.towxml(MDText, 'markdown', {
            base: e.globalData.baseUrl,             // 相对资源的base路径
            events: {                    // 为元素绑定的事件方法
                longpress: (e) => {
                    console.log(e.currentTarget.dataset.data)
                },
                tap: (e) => {
                }
            }
        });
    },
sbfkcel commented 1 year ago

不需要直接 decode.wxml 文件,在 config.js 中添加了对应的事件,之后重新 build 一下就可以了。

fuxi3344 commented 1 year ago

重新build?什么意思呢?如何重新build?

sbfkcel commented 12 months ago

重新build?什么意思呢?如何重新build?

看wiki