【报Bug】

分类：MUI

侧滑导航

详细问题描述
[内容]
mui框架侧滑与vue.js有冲突,用了v-for后,页面不能上下滚动
重现步骤
[步骤]
[结果]
[期望]
解决BUG
运行环境
[系统版本]
安卓6.0
[浏览器版本]
Hbuild手机预览
[IDE版本]
[mui版本]
最新
附件
[代码片段]
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">

<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="content">
<div class="mui-col-xs-6">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<a class="mui-control-item mui-active" href="#content1">毛巾抹布</a>
<a class="mui-control-item" href="#content2">韩国牙刷</a>
<a class="mui-control-item" href="#content3">舒爽洗浴</a>
<a class="mui-control-item" href="#content4">开心厨房</a>
<a class="mui-control-item" href="#content5">时尚生活</a>
<a class="mui-control-item" href="#content6">韩国洗化</a>
<a class="mui-control-item" href="#content7">美妆工具</a>
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-6" style="border-left: 1px solid #c8c7cc;">
<div id="content1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">竹纤维抹</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">不沾油抹布</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">印花毛巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">儿童毛巾 </a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">万用抹布</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">毛巾面巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">擦手巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有毛巾抹布</a>
</li>
</ul>
</div>
<div id="content2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">旅行牙具套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">五支装牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">四支装牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">三支装牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">两支装牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">单支装牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">儿童护齿牙刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有韩国牙刷</a>
</li>
</ul>
</div>
<div id="content3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">干发帽/干发巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">超柔浴巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">牙签/牙线 </a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">牙具盒/牙刷架</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">漱口杯/洗簌套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">洗浴包/浴帘/浴垫</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">拖鞋/居家拖</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">浴室吸盘挂钩</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">实用沐浴套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">皂盒/牙刷架</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">浴帽/束发带</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">浴花/浴球/澡巾</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">韩国进口牙膏</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">精油皂/手工皂</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有舒爽洗浴</a>
</li>
</ul>
</div>
<div id="content4" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">开瓶器/开罐器</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">清洁膏</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">磨刀器/研磨器 </a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">泡茶器/茶球</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">保温杯</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">保鲜盒/保鲜膜</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">封口夹/食物夹</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">切菜器/食物罩</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">饭盒/便当盒</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">起碗夹/蒸架</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">核桃夹/压蒜器</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">餐具盒/筷子笼</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">打蛋器</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">冰箱除味</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">厨房小工具</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">其他厨房用品</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">洗碗巾/百洁布</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">杯刷/清洁刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">厨房小家电</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">水果签</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">铝台布/抗菌垫</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">油壶/调味罐</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">围裙/微波炉手套</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">烧烤夹/烤肉盘</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">炒锅/汤锅/煎锅</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">炒铲/汤勺/漏勺</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">果盘/沥水篮</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">菜板</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">剔骨刀/鸡骨剪</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">菜刀/肉片刀</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">刨皮刀/水果刀</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">杯垫/隔热垫</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">碗/碗筷套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">叉/勺/餐具套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">筷子/学习筷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有开心厨房</a>
</li>
</ul>
</div>
<div id="content5" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">脸盆</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">其他生活用品</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">创可贴/药盒 </a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">闹钟/计时器</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">棉签/耳勺</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">家务手套</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">电源插板</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">剃须刀</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">礼品袋/购物袋</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">门垫/地垫</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">袜子/保暖裤</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">雨伞/雨衣</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">充电宝/耳机</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">钥匙扣</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">吸盘/挂钩</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">安全防护/门塞</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">汽车周边</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">居家装饰</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">去毛器/除尘刷</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">针线盒</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">卫生间清洁</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">鞋子周边</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">马桶周边</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">收纳储存</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">家务清洁</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">洗衣晾晒</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有时尚生活</a>
</li>
</ul>
</div>
<div id="content6" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">抹布皂/尿布皂</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">唇膏</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">去灰皂</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">美容皂</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">护手霜</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">面膜</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有韩国洗化</a>
</li>
</ul>
</div>
<div id="content7" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="allgoods.html">黄瓜切片器</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">化妆棉/卸妆棉</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">头绳/发圈</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">刮痧板</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">脚部护理工具</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">指甲剪/修甲刀</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">眉刀/修眉工具</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">喷瓶/化妆瓶套装</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">美发梳</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">化妆镜</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">粉刺针</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">面扑/粉扑</a>
</li>
<li class="mui-table-view-cell">
<a href="allgoods.html">所有美妆工具</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</aside>

<div id="mui-inner-wrap" class="mui-inner-wrap">
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-bar-nav">
<a href="index.html">
<div class="logo-index">首页</div>
</a>
<a href="Browsing history.html">
<div class="logo-other">每日上新</div>
</a>
<a href="allgoods.html">
<div class="logo-other">韩国进口</div>
</a>
<a href="allgoods.html">
<div class="logo-other">开心厨房</div>
</a>
<a href="allgoods.html">
<div class="logo-other">居家生活</div>
</a>
<a href="allgoods.html">
<div class="logo-other">卫浴清洁</div>
</a>
</div>
<div class="mui-scroll">
<div class="mui-content-padded">
<div class="mui-row">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">

<div class="mui-slider-item mui-slider-item-duplicate">
<a href="goods-detail.html">
<img src="images/4.jpg">
</a>
</div>

<div class="mui-slider-item">
<a href="goods-detail.html">
<img src="images/1.png">
</a>
</div>

<div class="mui-slider-item">
<a href="goods-detail.html">
<img src="images/2.jpg">
</a>
</div>

<div class="mui-slider-item">
<a href="goods-detail.html">
<img src="images/3.jpg">
</a>
</div>

<div class="mui-slider-item">
<a href="goods-detail.html">
<img src="images/4.jpg">
</a>
</div>

                                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
                                    <div class="mui-slider-item mui-slider-item-duplicate">  
                                        <a href="goods-detail.html">  
                                            <img src="images/1.png">  
                                        </a>  
                                    </div>  
                                </div>  
                                <div class="mui-slider-indicator">  
                                    <div class="mui-indicator mui-active"></div>  
                                    <div class="mui-indicator"></div>  
                                    <div class="mui-indicator"></div>  
                                    <div class="mui-indicator"></div>  
                                </div>  
                            </div>  
                        </div>  
                        <div class="mui-row mui-row-second">  
                            <div class="index-search">  
                                <img src="images/logo_03.png" />  
                                <div class="">  
                                    <input style="" type="text" name="" id="" value="" placeholder="请输入搜索关键词!" />  
                                    <a href="allgoods.html"><span class="mui-icon mui-icon-search index-search-icon"></span></a>  
                                    <a href="goods-category.html"><i class="iconfont index-list-icon">&#xe60d;</i></a>  
                                </div>  
                            </div>  
                            <div id="index-entry" class="mui-row mui-row-third">  
                                <ul class="mui-table-view mui-grid-view">  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="goods-category.html">  
                                            <img class="mui-media-object" src="images/index-logo_03.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">全部分类</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="my-indent.html">  
                                            <img class="mui-media-object" src="images/index-logo_05.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">我的订单</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="Browsing history.html"><img class="mui-media-object" src="images/index-logo_07.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">每日上新</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="sales-promotion.html">  
                                            <img class="mui-media-object" src="images/index-logo_09.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">促销活动</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="allgoods.html">  
                                            <img class="mui-media-object" src="images/index-logo_15.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">热门搜索</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="about-us.html">  
                                            <img class="mui-media-object" src="images/index-logo_16.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">关于我们</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="personal-center.html"><img class="mui-media-object" src="images/index-logo_17.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">个人中心</div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                        <a href="empty-shoppingcart.html">  
                                            <img class="mui-media-object" src="images/index-logo_18.png" style="width: 2.5rem;">  
                                            <div class="mui-media-body">购物车</div>  
                                        </a>  
                                    </li>  
                                </ul>  
                                <a href="">  
                                    <div class="index-news">  
                                        <img src="images/index-news_03.png" />  
                                        <div id="container">  
                                            <div id="inContainer">  
                                                <span id="onetxt">  
           关于G20峰会期间发货(快递物流)的通知  
        </span>  
                                                <span id="twotxt">  
             关于G20峰会期间发货(快递物流)的通知  
        </span>  
                                            </div>  
                                        </div>  
                                    </div>  
                                </a>  
                                <div class="index-activity">  
                                    | 热门活动  
                                </div>  
                                <div class="index-activity-cell">  
                                    <a href=""><img src="images/activity-cell_06.png" alt=" " /></a>  
                                    <a href=""><img src="images/activity-cell_07.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_08.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_09.png" alt="" /></a>  
                                </div>  
                                <div class="index-activity">  
                                    | 限量抢购  
                                </div>  
                                <div class="index-activity-cell">  
                                    <a href=""><img src="images/activity-cell_06.png" alt=" " /></a>  
                                    <a href=""><img src="images/activity-cell_07.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_08.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_09.png" alt="" /></a>  
                                </div>  
                                <div class="index-activity">  
                                    | 爆款推荐  
                                </div>  
                                <div class="index-activity-cell">  
                                    <a href=""><img src="images/activity-cell_06.png" alt=" " /></a>  
                                    <a href=""><img src="images/activity-cell_07.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_08.png" alt="" /></a>  
                                    <a href=""><img src="images/activity-cell_09.png" alt="" /></a>  
                                </div>  
                            </div>  
                            <div class="mui-row mui-row-four">  
                                <h4 style="background-color:#ff8040;text-align: center;color: #fff;margin: 0;font-size:0.9em;padding:0.4em 0em 0.4em 0em">每日上新</h4>  
                                <ul id="newgoods" class="mui-table-view mui-grid-view">  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="good in goods">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" v-bind:src="good.imgsrc">  
                                            <div class="mui-media-body newsgoods-name">{{good.goodname}}</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                {{good.goodprice}}  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>  
                                    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                                        <a href="goods-detail.html">  
                                            <img class="mui-media-object" src="images/new-goods_12.png">  
                                            <div class="mui-media-body newsgoods-name">创意家居装饰墙纸防水</div>  
                                            <div class="mui-media-body newgoods-price">  
                                                现价:2.10  
                                            </div>  
                                        </a>  
                                    </li>-->  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
                <div id="index-footer" class="index-footer mui-bar-footer">  
                    <ul id="index-footer-main" class="mui-table-view mui-grid-view">  
                        <li class="mui-table-view-cell mui-media mui-media-first mui-col-xs-2">  
                            <a href="index.html">  
                                <i class="iconfont">&#xe639;</i>  
                                <a href="index.html">  
                                    <div class="mui-media-body">首页</div>  
                                </a>  
                            </a>  
                        </li>  
                        <li id="call" class="mui-table-view-cell mui-media mui-media-other mui-col-xs-2">  
                            <i class="iconfont">&#xe604;</i>  
                            <div class="mui-media-body">电话</div>  
                        </li>  
                        <li class="mui-table-view-cell mui-media mui-media-other mui-col-xs-2">  
                            <a href="#">  
                                <i class="iconfont">&#xe643;</i>  
                                <a href="sales-promotion.html">  
                                    <div class="mui-media-body">促销</div>  
                                </a>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media mui-media-other mui-col-xs-2">  
                            <a href="empty-shoppingcart.html">  
                                <i class="iconfont">&#xe600;</i>  
                                <a href="empty-shoppingcart.html">  
                                    <div class="mui-media-body">购物车</div>  
                                </a>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media mui-media-other mui-col-xs-2">  
                            <a href="personal-center.html">  
                                <i class="iconfont">&#xe6c9;</i>  
                                <a href="personal-center.html">  
                                    <div class="mui-media-body">我的</div>  
                                </a>  
                            </a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
            <!-- off-canvas backdrop -->  
            <div class="mui-off-canvas-backdrop"></div>  
            <script>  
                mui.init();  
                mui("body").on('tap', '#call', function(event) {  
                    this.click();  
                });  
                mui('body').on('tap', 'a', function() {  
                    document.location.href = this.href;  
                });  
                //侧滑容器父节点  
                var offCanvasWrapper = mui('#offCanvasWrapper');  
                //主界面容器  
                var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
                //菜单容器  
                var offCanvasSide = document.getElementById("offCanvasSide");  
                //移动效果是否为整体移动  
                var moveTogether = false;  
                //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；  
                var classList = offCanvasWrapper[0].classList;  
                //变换侧滑动画移动效果；  
                mui('.mui-input-group').on('change', 'input', function() {  
                    if(this.checked) {  
                        offCanvasSide.classList.remove('mui-transitioning');  
                        offCanvasSide.setAttribute('style', '');  
                        classList.remove('mui-slide-in');  
                        classList.remove('mui-scalable');  
                        switch(this.value) {  
                            case 'main-move':  
                                if(moveTogether) {  
                                    //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列  
                                    offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);  
                                }  
                                break;  
                            case 'main-move-scalable':  
                                if(moveTogether) {  
                                    //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列  
                                    offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);  
                                }  
                                classList.add('mui-scalable');  
                                break;  
                        }  
                        offCanvasWrapper.offCanvas().refresh();  
                    }  
                });  
                //主界面和侧滑菜单界面均支持区域滚动；              
                mui('#offCanvasSideScroll').scroll();  
                mui('#offCanvasContentScroll').scroll();  
                //实现ios平台原生侧滑关闭页面；  
                if(mui.os.plus && mui.os.ios) {  
                    mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能  
                        plus.webview.currentWebview().setStyle({  
                            'popGesture': 'none'  
                        });  
                    });  
                }  
                document.getElementById("call").addEventListener('tap', function() {  
                    var btnArray = ['拨打', '取消'];  
                    var Phone = "0571-88888888";  
                    mui.confirm('是否拨打 ' + Phone + ' ？', '提示', btnArray, function(e) {  
                        if(e.index == 0) {  
                            plus.device.dial(Phone, false);  
                        }  
                    });  
                });  
            </script>  
            <script type="text/javascript">  
                new Vue({  
                    el: ".mui-content",  
                    data: {  
                        goods: [{  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },{  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },{  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },{  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            },  
                            {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }, {  
                                imgsrc: 'images/new-goods_12.png',  
                                goodname: '创意家居装饰墙纸防水',  
                                goodprice: '现价:2.10'  
                            }  
                        ],  
                    }  
                })  
            </script>  
</body>

[安装包]

联系方式
[QQ]
[电话]15268144812

2017-05-10 16:51 负责人:无分享