Vue cli+mui 区域滚动

来源：互联网发布：零起点学算法编辑：程序博客网时间：2024/05/20 15:49

vue cli+mui配合使用达到区域滚到的效果，方法如下

第一步引入mui css js

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

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

第二步

写结构 mui的区域滚动结构是这样的

<div class="mui-scroll-wrapper"><div class="mui-scroll">  *写需要滚动的内容</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 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});})}});},};</script>

这样就实现vue cli+mui区域滚动了

阅读全文

0 0