美文网首页
「优化」优化左右滑动效果

「优化」优化左右滑动效果

作者: ybrelax | 来源:发表于2018-12-06 15:19 被阅读0次
    • 通过vue-touch来进行优化

    https://github.com/vuejs/vue-touch/tree/next

    var VueTouch = require('vue-touch')
    Vue.use(VueTouch, {name: 'v-touch'}
    
    //左划      默认渲染为div   data为参数
    <v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
    //点击   渲染为一个a标签
    <v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
    //点击   渲染为p标签
    <v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>
    

    注意一点:touch-action: pan-y!important (解决上下不能滑动的问题) 在v-touch 加上这个css属性
    ios解决上下不能滑动 :swipe-options="{direction: 'horizontal'}"

    相关文章

      网友评论

          本文标题:「优化」优化左右滑动效果

          本文链接:https://www.haomeiwen.com/subject/abjocqtx.html