首頁 > web前端 > js教程 > 主體

Vue中使用cli+mui有關區域滾動問題

亚连
發布: 2018-06-09 15:52:51
原創
1965 人瀏覽過

下面我就為大家分享一篇Vue cli mui 區域滾動的實例程式碼,具有很好的參考價值,希望對大家有幫助。

vue cli mui配合使用達到區域滾到的效果,方法如下

#第一步引入mui css js

@import url("/static/mui.min.css");
登入後複製

JS

import mui from '../../../static/mui.min.js';
登入後複製

第二步驟

寫入結構mui的區域捲動結構是這樣的

<p class="mui-scroll-wrapper"> 
<p class="mui-scroll"> 
 *写需要滚动的内容 
</p> 
</p>
登入後複製

下面貼上我程式碼的一部分

 <p class="goods_foods mui-scroll-wrapper">
		 <p class="mui-scroll">
		 <ul class="mui-table-view">
		 	<li v-for="item in goods">
		 		<h5 class="atitle">{{item.name}}</h5>
		 		<ul class="mui-table-view">
		 			<li v-for="food in item.foods" class="mui-table-view-cell item">
		 				<p class="icon"><img :src="food.icon" width="57"height="57"></p>
		 				<p class="content">
		 				<p class="content mui-media-body">
		 					<h4 class="aname">{{food.name}}</h4>
		 					<p class="dese mui-ellipsis">{{food.description}}</p>
		 				</p>
		 				<p class="extar">
		 					<span>月售{{food.sellCount}}</span>
		 					<span>好评率{{food.rating}}%</span>
		 				</p>
		 				<p class="price">
		 					<span class="now">¥{{food.price}}</span>
		 					<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
		 				</p>
		 				</p>
		 			</li>
		 		</ul>
		 	</li>
		 	
		 </ul>
		</p>
		 
		 </p>
登入後複製

下面寫JS

<script>
 import mui from &#39;../../../static/mui.min.js&#39;
	const odd_ok=0;
	export default {
		props:{
			seller:{
				type:Object
			}
		},
		data(){
			return{
				goods:[]
			}
		},
		created(){
			this.$http.get("/api/goods").then((response) => {
				response=response.body;
				if(response.errno===odd_ok){
					this.goods=response.data;
					this.$nextTick( () => {
					mui(&#39;.mui-scroll-wrapper&#39;).scroll({
                    deceleration: 0.0005 
//flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
					})
				}
			});
		},
	};
</script>
登入後複製

這樣就實作vue cli mui區域滾動了。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在vue中如何使用ztree(詳細教學)

使用JS如何實作瀑布流外掛程式

在JS如何實作將html轉換為pdf功能

#使用JS如何實作貼上簿複製功能

#

以上是Vue中使用cli+mui有關區域滾動問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板