Home > Web Front-end > JS Tutorial > Issues related to area scrolling using cli+mui in Vue

Issues related to area scrolling using cli+mui in Vue

亚连
Release: 2018-06-09 15:52:51
Original
1995 people have browsed it

Below I will share with you an example code of Vue cli mui area scrolling. It has a good reference value and I hope it will be helpful to everyone.

vue cli mui is used together to achieve the effect of area rolling. The method is as follows

The first step is to introduce mui css js

@import url("/static/mui.min.css");
Copy after login

JS

import mui from '../../../static/mui.min.js';
Copy after login

Step 2

Write the area scrolling structure of structure mui It’s like this

<p class="mui-scroll-wrapper"> 
<p class="mui-scroll"> 
 *写需要滚动的内容 
</p> 
</p>
Copy after login

Paste part of my code below

 <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>
Copy after login

Write JS below

<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>
Copy after login

This will implement vue cli The mui area is scrolled.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ztree in vue (detailed tutorial)

How to implement waterfall flow plug-in using JS

How to implement the function of converting html to pdf in JS

How to implement the pasteboard copy function using JS

The above is the detailed content of Issues related to area scrolling using cli+mui in Vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template