使用MUI框架后部分页面会出现上线滑动不流畅的问题，主要表现为经常性滑动页面不动，只有偶尔有滑动响应。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<style>
.mui-table-view-cell{
padding:12px 15px;
}
.mui-table-view-cell:after{
left:0;
}
/*照片列表*/
.one_user{width:25%;height:22vw;text-align:center;position: relative;}
.one_user img{border-radius:5px;}
.mui-content-padded{border-bottom:1px solid #ccc;}
.my_left_img{height:13vw;line-height: 8vw;}
.left-img{height:7vw;}
.right-txt{width:50%;line-height:8vw;padding-left:4vw;}
.mui-btn{font-size:12px;}
.mui-btn.mui-icon{font-size:12px;}
.follow{color:#999;}
.no-follow{border:1px solid #999;color:#999;border-radius: 6px;}
.no-follow:enabled:active{border:1px solid #999;color:#999;border-radius: 6px;background-color:#fff;}
/*备注*/
.mark .right-txt{width:25%;line-height:8vw;padding-left:4vw;}
.mark li{padding-left:0;}
.mark .follow{color:#666;overflow:hidden;width:35%;}
.open,.edit,.del{font-size:14px;margin-left:3%;}
.mark .open{color:#999;}
.mark .edit{color:#64749b;}
.mark .del{color:#fc5d5d;}
/*备注价格弹窗*/
.mui-table-view-cell:after{left:0;}
.mui-card{margin:0;}
.info_bg,.info_mark,.info_style{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: fixed;
top: 0px;
display:none;
z-index: 20;
}
.info_bg .info_main,.info_mark .info_main,.info_style .info_main{
width: 90%;
background: #fff;
height: auto;
border-radius: 10px;
position: absolute;
top: 8%;
left: 5%;
z-index: 99;
}
/*弹窗中间边框颜色*/
.mui-input-group .mui-input-row:after{background-color:#fff;}
.radio_price{width:100%;height:10vw;line-height: 10vw;}
.radio_mark{width:100%;height:10vw;line-height: 10vw;}
.price_one,.price_one2,.price_one3{width:35%;text-align:center;position:relative;}
.price_one img,.price_one2 img,.price_one3 img{height:5vw;position:absolute;top:26%;}
.price_one span,.price_one2 span,.price_one3 span{margin-left:30%;}
/*.line-white:after{background-color:#fff;}*/
/*alert弹窗的字体颜色*/
.mui-popup-button{color:#46C11B;}
/*选择方式*/
.radio_style .price_one4{width:50%;height:30vw;}
.radio_style .price_one4 img{width:40%;margin-left:30%;}
.info_style{z-index: 999;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" >
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">添加图文</h1>
<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled" style="display: none;">
<img src="../img/wechat/icon_share_black.png" alt="" class="mui-pull-right" style="width:30px;line-height:30px;margin-top:7px;margin-right:3vw;"/>
</a>
<!-- <span class="mui-title mui-title-save mui-font-color mui-top-right-font-size mui-pull-right" id="mui-title-save" style="left:85vw;width:10vw;font-size:15px;text-align:center;">
<img src="../img/wechat/icon_share_black.png" alt="" style="height:6vw;line-height:10vw;margin-top:15%;"/>
</span> -->
</header>
<div id="detail" class="mui-content" style="overflow-y: auto;height: 100%;">
<div class="mui-input-row" style="margin:0;height:35vw;background:#fff;">
<textarea id="textarea" rows="5" placeholder="这一刻的想法..." style="border:1px solid #fff;font-size:15px;">
{{dynamic.dynamic_text}}
</textarea>
</div>
<div class="mui-content-padded" style="margin: 0;width:100%;background:#fff;height:auto;min-height: 22vw;">
<!-- 用户上传的图片 -->
<div class="send_img">
<div class="one_user fl share-img" v-for="pir in dynamic.pictures">
<img class="img-share" v-bind:src="pir.photo_url" alt="" style="width:80%;max-height: 100%;">
<img src="../../img/icon_reduce2.png" style="width: 5vw;position: absolute;top: 0;right: 3vw;">
</div>
</div>
<div class="one_user fl icon_add">
<img src="../img/wechat/icon_add5.png" alt="" style="width:80%;">
</div>
<div class="clear"></div>
</div>
<div class="height_3vw"></div>
<ul class="mui-table-view" style="">
<li class="mui-table-view-cell mui-radio mui-left my_left_img see_cate" style="padding-left:5vw;" data="0">
<img src="../img/wechat/icon_list_group.png" alt="" class="fl left-img"/>
<div class="fl right-txt">分类与标签</div>
<div class="fr follow"></div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img see_no" style="padding-left:5vw;" data="1">
<img src="../img/wechat/icon_list_eye.png" alt="" class="fl left-img"/>
<div class="fl right-txt">谁可以看</div>
<div class="fr follow">公开</div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img see_can" style="padding-left:5vw;" data= "0">
<img src="../img/wechat/icon_list_@.png" alt="" class="fl left-img"/>
<div class="fl right-txt">提醒谁看</div>
<input type="hidden" id="who_see_ids" value="">
<div class="fr follow"></div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img see_from" style="padding-left:5vw;" data = "0">
<img src="../img/wechat/icon_list_origin.png" alt="" class="fl left-img"/>
<div class="fl right-txt">来源(仅自己可见)</div>
<div class="fr follow">{{dynamic.nickname}}</div>
<div class="clear"></div>
</li>
<a href="#picture" style="outline:none;">
<li class="mui-table-view-cell mui-radio mui-left my_left_img" style="padding-left:5vw;">
<img src="../img/wechat/icon_list_mark.png" alt="" class="fl left-img"/>
<div class="fl right-txt">备注</div>
<div class="clear"></div>
</li>
</a>
</ul>
<div style="font-size:14px;height:8vw;line-height:8vw;margin-left:5vw;">备注信息</div>
<ul class="mui-table-view mark m_ul1">
<li class="mui-table-view-cell mui-left my_left_img m_li1" style="padding-left:1vw;" data="0">
<div class="fl right-txt">货号</div>
<div class="fl follow"></div>
<div class="fr del">删除</div>
<div class="fr edit">编辑</div>
<!--<div class="fr open">公开</div>-->
<div class="clear"></div>
</li>
</ul>
<ul class="mui-table-view mark">
<li class="mui-table-view-cell mui-radio mui-left my_left_img c_li1" style="padding-left:1vw;" data="0">
<div class="fl right-txt">拿货价</div>
<div class="fl follow">{{dynamic.take_price}}</div>
<div class="fr del">删除</div>
<div class="fr edit" data="1">编辑</div>
<div class="fr open" data_id="">公开</div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img c_li2" style="padding-left:1vw;" data="0">
<div class="fl right-txt">零售价</div>
<div class="fl follow">{{dynamic.sell_price}}</div>
<div class="fr del">删除</div>
<div class="fr edit" data="2">编辑</div>
<div class="fr open" data_id="">公开</div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img c_li3" style="padding-left:1vw;" data="0">
<div class="fl right-txt">批发价</div>
<div class="fl follow">{{dynamic.whol_price}}</div>
<div class="fr del">删除</div>
<div class="fr edit" data="3">编辑</div>
<div class="fr open" data_id="">公开</div>
<div class="clear"></div>
</li>
<li class="mui-table-view-cell mui-radio mui-left my_left_img c_li4" style="padding-left:1vw;" data="0">
<div class="fl right-txt">打包价</div>
<div class="fl follow">{{dynamic.pack_price}}</div>
<div class="fr del">删除</div>
<div class="fr edit" data="4">编辑</div>
<div class="fr open" data_id="">公开</div>
<div class="clear"></div>
</li>
</ul>
<ul class="mui-table-view mark">
<li class="mui-table-view-cell mui-left my_left_img d_li1" style="padding-left:1vw;height:17vw;line-height:17vw;" data="0">
<div class="fl right-txt" style="line-height:13vw;">备注</div>
<div class="fl follow" style="line-height: 7vw;height:16vw;word-break: break-all;width:38%;">{{dynamic.mark}}</div>
<div class="fr del" style="line-height: 13vw;">删除</div>
<div class="fr edit" style="line-height: 13vw;">编辑</div>
<div class="fr open" style="line-height: 13vw;" data_id="">公开</div>
<div class="clear"></div>
</li>
</ul>
<div style="height: 18vw;width: 100%;"></div>
</div>
<div class="fixed" style="position:fixed;bottom:0;height:12vw;text-align: center;width:100%;background:#fff;line-height:12vw;border-top:1px solid #ccc;font-weight:bold;font-size:14px;">
<div id="release" class="fl" style="width:50%;" onclick="release(0);">发布</div>
<div id="releaseandshare" class="fl mui-color" style="width:50%;color:#fff;" onclick="release(1);">发布及分享到朋友圈</div>
</div>
<!--点击备注，显示-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell mu-number">
<a href="#picture" style="color:#333;">货号</a>
</li>
<li class="mui-table-view-cell mu-price">
<a href="#picture" style="color:#333;">价格</a>
</li>
<li class="mui-table-view-cell mu-mark">
<a href="#picture" style="color:#333;">其他备注内容</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b style="color:#333;">取消</b></a>
</li>
</ul>
</div>
<!-- 备注价格弹窗 -->
<div class="info_bg" style="display: none;">
<div class="info_main">
<div class="mui-card" style="border-radius:10px;">
<form class="mui-input-group">
<div class="mui-input-row mui-radio line-white" style="height: 40px;line-height: 40px;font-size: 18px;">
<label>价格备注</label>
</div>
<div class="mui-input-row" data="0" style="height:35vw;">
<div class="radio_price">
<div class="fl price_one" data="1" data_id="1">
<img src="../img/wechat/icon_ensure2_pre.png" alt="">
<span>拿货价</span>
</div>
<div class="fl price_one" data="2" data_id="2">
<img src="../img/wechat/icon_ensure2_nor.png" alt="">
<span>零售价</span>
</div>
<div class="clear"></div>
</div>
<div class="radio_price">
<div class="fl price_one" data="3" data_id="3">
<img src="../img/wechat/icon_ensure2_nor.png" alt="">
<span>批发价</span>
</div>
<div class="fl price_one" data="4" data_id="4">
<img src="../img/wechat/icon_ensure2_nor.png" alt="">
<span>打包价</span>
</div>
<div class="clear"></div>
</div>
<input type="text" style="border:1px solid #ddd;width:90%;margin-left:5%;border-radius:5px;margin-top: 2vw;" placeholder="请输入价格" class="goods_price">
</div>
<div class="mui-input-row mui-radio" style="height: 40px;line-height: 40px;font-size: 18px;">
<label>谁可以看</label>
</div>
<div class="mui-input-row" data="0" style="height:15vw;">
<div class="radio_price">
<div class="fl price_one2" data="1" data_id="1">
<img src="../img/wechat/icon_ensure2_pre.png" alt="">
<span>公开</span>
</div>
<div class="fl price_one2" data="0" data_id="2">
<img src="../img/wechat/icon_ensure2_nor.png" alt="">
<span>私密</span>
</div>
<div class="clear"></div>
</div>
</div>
<div class="mui-input-row mui-radio">
<input class="cancel" type="button" value="取消" style="width:49%;text-align:center;line-height: 30px;">
<input class="ok" type="button" value="确定" style="width:49%;text-align:center;line-height: 30px;color:#46c11b;">
</div>
</form>
</div>
</div>
</div>
<!-- 备注价格弹窗 -->
<!-- 其他备注弹窗 -->
<div class="info_mark" style="display: none;">
<div class="info_main">
<div class="mui-card" style="border-radius:10px;">
<form class="mui-input-group">
<div class="mui-input-row mui-radio line-white" style="height: 40px;line-height: 40px;font-size: 18px;">
<label>其他备注</label>
</div>
<div class="mui-input-row" data="0" style="height:13vw;">
<input type="text" style="border:0px solid #ddd;width:90%;margin-left:5%;border-radius:5px;margin-top: 2vw;" placeholder="请输入备注" class="goods_mark">
</div>
<div class="mui-input-row mui-radio" style="height: 40px;line-height: 40px;font-size: 18px;">
<label>谁可以看</label>
</div>
<div class="mui-input-row" data="0" style="height:15vw;">
<div class="radio_mark">
<div class="fl price_one3" data="1" data_id="1">
<img src="../img/wechat/icon_ensure2_pre.png" alt="">
<span>公开</span>
</div>
<div class="fl price_one3" data="0" data_id="2">
<img src="../img/wechat/icon_ensure2_nor.png" alt="">
<span>私密</span>
</div>
<div class="clear"></div>
</div>
</div>
<div class="mui-input-row mui-radio">
<input class="cancel2" type="button" value="取消" style="width:49%;text-align:center;line-height: 30px;">
<input class="ok2" type="button" value="确定" style="width:49%;text-align:center;line-height: 30px;color:#46c11b;">
</div>
</form>
</div>
</div>
</div>
<!-- 其他备注弹窗 -->
<!-- 头部右上角弹窗 -->
<div class="info_style" style="display: none;">
<div class="info_main">
<div class="mui-card" style="border-radius:10px;">
<form class="mui-input-group" style="z-index:999;">
<div class="mui-input-row mui-radio" style="height: 40px;line-height: 60px;font-size: 18px;text-align: center;">
<div style="padding-right:auto;">选择方式</div>
</div>
<div class="mui-input-row" data="0" style="height:40vw;padding-top:4vw;">
<div class="radio_style">
<div class="fl price_one4 wechat_friend" data="1" data_id="1">
<img src="../img/wechat/icon_wechat.png" alt="" class="fl" style="margin-left:40%;">
<div class="fl" style="margin-left:45%;margin-top:3vw;">微商好友</div>
<div class="clear"></div>
</div>
<div class="fl price_one4 save_location" data="0" data_id="2">
<img src="../img/wechat/icon_loca.png" alt="" class="fl" style="margin-left:20%;">
<div class="fl" style="margin-left:20%;margin-top:3vw;">保存到本地</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 头部右上角弹窗 -->
<script src="../../js/mui.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/common/utils.js" ></script>
<script src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/wechat/share.js" ></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
1 个回复
DCloud_heavensoft
不要用div区域滚动。使用页面的整体滚动不会卡