mingtianfu
mingtianfu
  • 发布:2015-11-19 20:00
  • 更新:2018-12-22 01:41
  • 阅读:15576

“选项卡切换+下拉刷新”模板与vue.js有冲突

分类:MUI

引入vue.js后,如图红框部分的左右滑动失效了,有遇到过的吗,或者有什么解决办法

2015-11-19 20:00 1 条评论 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

使用数据双向绑定框架时,均需要在DOM渲染完之后,手动调用插件。
以vue为例,vue默认是异步渲染,当修改data之后,需要在nextTick的回调里初始化插件。

  • 古芗

    题主红框内,是需要调用什么组件? 我在vue 的nextTick回调里 调用了 mui().scroll() 组件,无效!

    2017-05-18 11:28

  • 特洛伊

    var vm = new Vue({...}); vue实例要命名在plusready之外! 然后在ajax获得数据后,调用vm.$nextTick(),在回调函数里初始化组件!

    2018-08-31 14:09

  • 特洛伊

    我发起了一个经验:http://ask.dcloud.net.cn/article/34973 具体的你可以看看

    2018-08-31 14:17

houfeng2016

houfeng2016

vue 是一个 “双向绑定” 的 library ,mui 和其一般不会有冲突,能否描述一下的用法?

mingtianfu

mingtianfu (作者)

<div class="mui-content" id="app">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" v-if="!loading">
<a v-repeat="item in items.mall_type" v-class="mui-control-item:true,mui-active:$index==0" href="#item{{$index+1}}mobile" v-on="tap:getData($index)">
{{item}}
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li v-repeat="item in items.malls" class="mui-table-view-cell">
{{item.title}}
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第2个选项卡子项-1
</li>
</ul>
</div>
</div>
</div>

            </div>  
        </div>  
    </div>  
    <script src="js/mui.min.js"></script>  
    <script src="js/mui.pullToRefresh.js"></script>  
    <script src="js/mui.pullToRefresh.material.js"></script>  
    <script type="text/javascript" src="js/vue.min.js"></script>          
    <script type="text/javascript" src="js/mall.js"></script>
mingtianfu

mingtianfu (作者)

上面是html代码,下面的自带的js我没有动过,就不贴了
我的mall.js里面代码是

var burl = "http://wxtp.jayanbo.com/index.php";  
au("ajax", "mall", "", "#app");  

function au(mod, act, cid, el) {  

    var data = mui.ajax(burl, {  
        data: {  
            mod: mod,  
            act: act,  
            cid: cid  
        },  
        dataType: 'json', //服务器返回json格式数据  
        type: 'get', //HTTP请求类型  
        success: function(data) {  
            //获得服务器响应  
            console.log(JSON.stringify(data.mall_type));  
            var items = data;  

            var app = new Vue({  
                el: el,  
                data: {  
                    items: items,  
                    loading: false  
                },  
                // 在 `methods` 对象中定义方法  
                methods: {  
                    getData: function(index, event) {  
                        // 方法内 `this` 指向 vm  
                        alert(index);  
                    }  
                }  
            })  

        }  
    });  
}
mingtianfu

mingtianfu (作者)

数据都能正常加载
上拉下拉刷新和内容的列表的切换都是正常,
只是红框内的滑动失效

KAZAMI

KAZAMI

也有问题,使用1.0版本的vue,数据已经更新,但是DOM却没有更新,烦死人

  • 铅笔画

    怎么解决的啊

    2016-07-26 00:27

WHY1WH

WHY1WH

红框内的滑动可以设置根据数量自适应宽度吗?

88273531@qq.com

88273531@qq.com

同问怎么弄

Arliang

Arliang

我也遇到这问题,最后不用vue了,问题还是存在,最后发现似乎是因为连接了chrome的调试器无法拖动,把inspector关掉就能很顺畅地滑动了

2235581236@qq.com

2235581236@qq.com

你好,我也遇到这个问题了,请问你解决了吗

236707608@qq.com

236707608@qq.com

你好,我也遇到这个问题了,请问你解决了吗

typer

typer - 90后ITboy

vue结合mui时的正确使用方式(至少我遇到的slider无法滑动的问题正常了):https://blog.csdn.net/a8725585/article/details/72152264

心灵艺术

心灵艺术

我也遇到这个问题了。
找了很多问题。说加了mui('.mui-slider').slider();之后就可以了。但是加了mui('.mui-slider').slider();之后内容是可以左右移动了。可上面的红色区域还是无法移动,一直报"Uncaught TypeError: Cannot read property '0' of undefined" /59220/js/mui.js (3803)”的错误。有没有高手来个解决方法。

要回复问题请先登录注册