이제 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 '../../../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 영역 스크롤은 깨달았다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
vue에서 ztree를 사용하는 방법(자세한 튜토리얼)
JS에서 html을 pdf로 변환하는 기능을 구현하는 방법
위 내용은 Vue에서 cli+mui를 사용한 영역 스크롤 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!