swiper+SUI Mobile

滑動插件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);
		});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章