欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue cli+mui 區(qū)域滾動的實例代碼

 更新時間:2018年01月25日 09:02:48   作者:qq_36947128  
下面小編就為大家分享一篇Vue cli+mui 區(qū)域滾動的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

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

第一步 引入mui css js

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

JS

import mui from '../../../static/mui.min.js'; 

第二步

寫結(jié)構(gòu) mui的區(qū)域滾動結(jié)構(gòu)是這樣的

<div class="mui-scroll-wrapper"> 
<div class="mui-scroll"> 
 *寫需要滾動的內(nèi)容 
</div> 
</div> 

下面粘貼我代碼的一部分

 <div class="goods_foods mui-scroll-wrapper">
		 <div 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">
		 				<div class="icon"><img :src="food.icon" width="57"height="57"></div>
		 				<div class="content">
		 				<div class="content mui-media-body">
		 					<h4 class="aname">{{food.name}}</h4>
		 					<p class="dese mui-ellipsis">{{food.description}}</p>
		 				</div>
		 				<div class="extar">
		 					<span>月售{{food.sellCount}}</span>
		 					<span>好評率{{food.rating}}%</span>
		 				</div>
		 				<div class="price">
		 					<span class="now">¥{{food.price}}</span>
		 					<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
		 				</div>
		 				</div>
		 			</li>
		 		</ul>
		 	</li>
		 	
		 </ul>
		</div>
		 
		 </div>

下面寫JS

<script>
 import mui from '../../../static/mui.min.js'
	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('.mui-scroll-wrapper').scroll({
                    deceleration: 0.0005 
//flick 減速系數(shù),系數(shù)越大,滾動速度越慢,滾動距離越小,默認值0.0006
});
					})
				}
			});
		},
	};
</script>

這樣就實現(xiàn)vue cli+mui區(qū)域滾動了。

以上這篇Vue cli+mui 區(qū)域滾動的實例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue elementUI 上傳非空驗證示例代碼

    vue elementUI 上傳非空驗證示例代碼

    這篇文章主要介紹了vue elementUI 上傳非空驗證,原理就是寫一個假的紅色*號,每次點擊查看的時候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2023-12-12
  • 在vue中實現(xiàn)禁止屏幕滾動,禁止屏幕滑動

    在vue中實現(xiàn)禁止屏幕滾動,禁止屏幕滑動

    這篇文章主要介紹了在vue中實現(xiàn)禁止屏幕滾動,禁止屏幕滑動,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • unplugin-auto-import的配置以及eslint報錯解決詳解

    unplugin-auto-import的配置以及eslint報錯解決詳解

    unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • 八個Vue中常用的v指令詳解

    八個Vue中常用的v指令詳解

    vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue?Router?返回后記住滾動條位置的實現(xiàn)方法

    Vue?Router?返回后記住滾動條位置的實現(xiàn)方法

    使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求:首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下
    2023-09-09
  • Vue.js綁定HTML class數(shù)組語法錯誤的原因分析

    Vue.js綁定HTML class數(shù)組語法錯誤的原因分析

    Vue.js綁定HTML class數(shù)組語法錯誤有哪些原因?qū)е碌哪?,該如何解決呢?下面小編給大家分享Vue.js綁定HTML class數(shù)組語法錯誤的原因分析,感興趣的朋友一起看看吧
    2016-10-10
  • 利用Vite搭建Vue3+ElementUI-Plus項目的全過程

    利用Vite搭建Vue3+ElementUI-Plus項目的全過程

    vue3如今已經(jīng)成為默認版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • 詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案

    詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案

    本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實現(xiàn)方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue3+ts使用APlayer的示例代碼

    vue3+ts使用APlayer的示例代碼

    這篇文章主要介紹了vue3+ts使用APlayer的示例代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08

最新評論