滑動插件swiper,與sm.min.js中的content衝突;導致滑動紊亂。
解決辦法是用滾動代替的;然後隱藏滾動條
css
.problem_main {
width: 100%;
height: auto;
overflow: auto;
}
.problem_mbox{
width: 376px;
position: relative;
}
.problem_mli {
height: 40px;
line-height: 40px;
overflow: hidden;
float: left;
position: relative;
text-align: center;
font-size: 14px;
}
.problem_main::-webkit-scrollbar {/*隱藏滾輪*/
display: none;
}
html
<div class="problem_main">
<ul class="problem_mbox">
</ul>
</div>
js
function getProblemType() {
$.ajax({
url: mainUrl + 'mobile/app/plantingStandard/ny_problem_type',
data: {},
type: "post",
dataType: "json",
async:"false",
success: function (json) {
var json = json.data;
var html = "";
var scrollWidth = $(window).width()/4;
for(var i=0;i<json.length;i++) {
var dictLabel = json[i].dictLabel;
if(json[i].dictLabel.length>4) {
var dictLabel = json[i].dictLabel.slice(0,4);
}else{
var dictLabel = json[i].dictLabel;
}
html += '<li class="problem_mli" style="width: '+scrollWidth+'px;" title="' + json[i].dictLabel + '" id="' + json[i].dictValue + '">' + dictLabel + "</li>";
// html += '<div class="swiper-slide hotWdType" title="'+json[i].dictLabel+'" id="'+json[i].dictValue+'">'+dictLabel+"</div>";
}
var mbox_width = json.length*scrollWidth+'px';
$('.problem_mbox').css('width',mbox_width);
$(".problem_mbox").html(html);
$(".problem_mli").eq(0).addClass("z_active");
getIssueTypeById(json[0].dictValue,limit,start);
});