vue 使用 mui scroll 做区域滚动 (version @vue/cli 4.2.2) 原创 大神带你飞

github下载MUI:https://github.com/dcloudio/mui
克隆方法 git clone <mui地址>

第一步:

1.先从github 拉取 mui 的 dist 文件夹

image.png

2. 将dist文件夹里面的 三个文件夹 放置在自己的 assist/lib/mui/ 里面 如下:

image.png

第二步: 在根目录打开 main.js

加入如下代码:

import './assets/lib/mui/css/mui.css'
import mui from './assets/lib/mui/js/mui.js'
Vue.prototype.mui = mui;
image.png

第三步: 在当前项目需要安装2个依赖包

命令如下:

npm install @babel/plugin-transform-modules-commonjs -D
npm install @babel/plugin-transform-strict-mode -D

如果安装好了,会在package这样显示:

image.png

第四步

打开 babel.config.js 代码添加

plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    [
        "@babel/plugin-transform-modules-commonjs", {
            "strictMode": false
        }
    ]
]
image.png

第五步:

打开 router.js 新建 test 路由:

        {
            path: "/test",
            name: "test",
            component: () => import("./views/Test.vue")
        }

在views 文件夹下新建 Test.vue :

<!-- 模版 -->
<template>
    <div class="container">
        <div class="mui-scroll-wrapper"> 
            <div class="mui-scroll"> 
                <div class="mui-content">
                    *写需要滚动的内容 
                </div>
            </div> 
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        mounted(){
            this.mui(".mui-scroll-wrapper").scroll({
                  scrollY: true, //是否竖向滚动
                  scrollX: false, //是否横向滚动
                  startX: 0, //初始化时滚动至x
                  startY: 0, //初始化时滚动至y
                  indicators: true, //是否显示滚动条
                  deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                  bounce: true //是否启用回弹
            })
        },
    }
</script>
<style lang="stylus" scoped>
    .container
        position relative
        float left
        width 100%
        height 500px
        .mui-content
            height 900px
            text-align center
            padding 30px 0
            background -webkit-linear-gradient(#fff, #f60)
</style>

第六步

重启服务器 就可以使用了
大功告成!
喜欢的话,点个收藏,加个关注哟,
如果配置中有什么问题欢迎评论哟,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。