同一个文件,有两种解析渲染方
<div class="box box1 mui-slider-item mui-control-content mui-active" id="gbox1">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--图片轮播-->
<div class="slide-detail-pic" id="slide-detail-pic">
<div class="slide-detail-pic swiper-container" id="slide-detail-pic">
<ul class="swiper-wrapper swiperimgauto">
<li class="swiper-slide"><a href="javascript:void(0);"><img src="{$goods['img']}" alt=""/></a></li>
<!--{loop $imgs $p}-->
<li class="swiper-slide"><a href="javascript:void(0);"><img src="{$p['img']}" alt=""/></a></li>
<!--{/loop}-->
</ul>
<div class="swiper-pagination"></div>
{if $goods['video']!=''}
<span class="play-btn"><i class="layui-icon yec-video"></i> 视频</span>
<div id="goods-video" style="display: none;background-color: #000;">
<video src="{$goods['video']}" id="player" preload="auto" controls="controls" width="100%" height="auto"></video>
</div>
<a class="close-video layui-icon yec-close1"></a>
{/if}
</div>
</div>
<!--图片轮播-->
<!--文字介绍-->
<div class="word-detail bgw">
<div class="title-det">
<h3 class="title"><a href="javascript:void(0);">{if $goods['label_pos'] ==1}<span class="orange">{$goods['label']}</span>{/if}{$goods[name]}{if $goods['label_pos'] ==2}<span class="orange">{$goods['label']}</span>{/if}</a></h3>
</div>
<div class="price-det">
<!-- <span class="grey-td">售价:</span> -->
<div class="pd-nr">
<p><span class="now"><span id="ym-price">¥{$goods['goods_price']}</span></span><del>¥<span>{$goods[marketprice]}</span></del></p>
</div>
{if $team}
<div>
拼团更优惠:
<table class="tb">
{loop $team['data'] $p}
<tr>
<td>{$p['num']}人团</td>
<td class="price">¥{$p['price']}</td>
<td>团长价:<span class="price">{if $p['teamer_price']==0}免单{else}¥{$p['teamer_price']}{/if}</span></td>
</tr>
{/loop}
</table>
</div>
{/if}
</div>
<div class="choose-size spec" id="goods-spec">
<!--{loop $spec $p}-->
<div class="it">
<h4 class="spec-name">{$p[name]}</h4>
<span class="select-mod">
<ul class="choose-size-ul">
<!--{loop $p['val'] $v}-->
<!--{if $p['is_img']==1}-->
<li style="margin:3px"><a href="javascript:void(0);" id="{$v['name']}">{if $v['img']['thumb']}<img src="{$v['img']['thumb']}" width="20" height="20"> {/if}{$v['name']}</a><i class="arrow-checked"></i></li>
<!--{else}-->
<li style="margin:3px"><a href="javascript:void(0);" id="{$v}">{$v}</a><i class="arrow-checked"></i></li>
<!--{/if}-->
<!--{/loop}-->
</ul>
</span>
</div>
<!--{/loop}-->
</div>
<div class="barnum-det">
<p>品牌:<span>{$goods['brand_name']}</span></p>
<p class="num">已售:<span>{$goods['virtualnum']}</span></p>
</div>
</div>
{if $teaming}
<div class="team-list" style="display: block;">
<div class="tit">
以下老铁正在拼团,可直接参与 <a href="team.html" class="more tiao">查看更多</a>
</div>
<div class="list">
{loop $teaming $p}
<div class="item">
<div class="uinfo">
<span class="img"><img src="{$p['img']}"></span>
<span class="name">{$p['uname']}</span>
</div>
<div class="teamtime">
<p>还差<b class="remain_count">{$p['remain_count']}</b>人成团</p>
<p id="time1" data-time="{$p['remain_time']}" class="timeinfo">剩余<span id="v_day1" style="display: inline-block;">0</span>天 <span id="v_hour1">0</span>:<span id="v_minute1">0</span>:<span id="v_second1">0</span> </p>
<script>window.setInterval(function(){SetRemainTime(1);},1000);</script>
<a href="#mod-jointeam" class="jointeam tiao" data-num="{$p['num']}" data-user='{$p["team_user_json"]}'>去参团</a>
</div>
</div>
{/loop}
</div>
<div class="clear"></div>
</div>
{/if}
<ul class="function-det flex bgw">
<li class="flex1">
<i class="icon-fun1"></i>
正品行贷
</li>
<li class="flex1">
<i class="icon-fun2"></i>
免息分期
</li>
<li class="flex1">
<i class="icon-fun3"></i>
7天退换
</li>
<li class="flex1">
<i class="icon-fun4"></i>
金牌客服
</li>
</ul>
<!--文字介绍-->
<!--评价-->
<div class="bgw appraise">
<a href="javascript:void(0);" class="mui-navigate-right titie-line" id="view-txt">评价</a>
<div id="view-more-appraise">
<ul class="appraise-ul">
<!--{if !$comment}--><li style="text-align: center;">暂无评价~</li><!--{/if}-->
<!--{loop $comment $p}-->
<li>
<div class="picbox">
<img src="{if $p['uimg']!=''}{$p['uimg']}{else}{tpl_root}images/avatar.jpg{/if}" alt=""/>
</div>
<div class="txt-right">
<div class="txtr-top">
<p class=" grey96">{$p['anon_name']}</p>
</div>
<div class="txt-middle ">
<p>{$p['content']}</p>
</div>
<div class="com-pic">
<!--{if $p['thumb']}-->
<div class="show-pic" id="show-pic">
<div class="sc_bd">
<dl>
<!--{loop $p['thumb'] $i $t}-->
<dd><a data-src="{$p['img'][$i]}"><img src="{$t}" width="80" height="80"/></a></dd>
<!--{/loop}-->
</dl>
</div>
</div>
<!--{/if}-->
</div>
<!--{if $p['admin_reply']}-->
<div class="reply">
<ul>
<!--{loop $p['admin_reply'] $v}-->
<li>
<span>{$v['uname']}:</span>{$v['content']}
</li>
<!--{/loop}-->
</ul>
</div>
<!--{/if}-->
<p class="clear grey96">{$p['addtime']}</p>
</div>
</li>
<!--{/loop}-->
</ul>
<div class="morediv" id="view-more-appraise">
<a href="javascript:void(0);">查看更多 ></a>
</div>
</div>
</div>
<!--评价-->
<!--猜你感兴趣-->
<div class="guess-like">
<h3 class="pur-title" style="margin-bottom:10px;">猜你感兴趣</h3>
<ul class="popular-pro">
<!--{loop $remmend_goods $p}-->
<li>
<a href="{$p[url]}" class="picbox tiao"><img src="{$p[thumb]}" alt="196*196"></a>
<a href="{$p[url]}" class="title tiao">{$p[name]}</a>
<div class="price-cart">
<p>¥<span>{$p[price]}</span></p>
<!-- <a onclick="addCart({$p[goods_id]},0,1);" class="cart"></a> -->
</div>
</li>
<!--{/loop}-->
</ul>
</div>
<!--猜你感兴趣-->
<!--<div class="loading">
<p class="mui-text-center"><i class="mui-icon mui-icon-arrowup"></i>继续拖动,查看图文详情</p>
</div>-->
</div>
</div>
</div>
有的页面正常,有的页面滑动滚动条时页面会晃动
尝试将mui-control-content设置的最小高度去掉,问题还是没有解决
原因可能是 宽度问题,既然你说有滚动条,那么就有时候就会忽略滚动条的宽度,比如 元素内容少的时候宽度是100px ,内容多了后出现滚动条,滚动条宽度10 这样总宽度就变成110了 (这时有些地方宽度不一致所以出现了晃动的情况) ,正确的是元素宽度+滚动条宽度=总宽度 建议使用滚动插件制作滚动的布局 或排版 而且方便快捷,推荐 使用 skrollr js 或 better-scroll.js