首页 > 其他分享> 文章详细

vue2混入写法

2022-05-25 09:01:55 阅读：188 来源： 互联网

标签：混入滚动顶部 res vue2 组件 uni 写法

为什么用 mixins

从官方的介绍我们可以知道

mixins的作用是抽取组件中相同的属性和方法到独立的文件，以便公用。
mixins对象会被混入该组件本身，所有会有命名冲突。

举个例子：做一个公共返回顶部

因为每个页面都要写滚动的生命周期，然后再把滚动的值传到组件里

所以做了一个公共组件和一个公共专门放混入写法的文件，这样写的好处就不需要每个页面是维护，改个公共文件就行了

1.混入代码写法：

返回顶部子组件：

代码：

<template>
    <view>
        <view class="public-goback" @click="topBack" v-if="isShow" >返回顶部</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            isShow: false,
        };
    },
    // 接受父组件的值
    props: {
        scrollHeight: {
            type: Number,
            required: true,
        },
    },
    watch: {
        scrollHeight(val) {
            uni.getSystemInfo({
                success: (res) => {
                    // 判断滚动高度大于屏幕高度
                    this.isShow = val > res.screenHeight;
                },
            });
        },
    },
    methods: {
        topBack() {
            if (uni.pageScrollTo) {
                uni.pageScrollTo({
                    scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0
                    duration: 300, // 滚动动画的时长
                });
            } else {
                uni.showModal({
                    title: "提示",
                    content:
                        "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
                });
            }
        },
    },
};
</script>
<style lang="less" scoped>
/* 返回顶部 */
.public-goback {
    position: fixed;
    left: 50%;
    transform: translateX(270rpx);
    bottom: 8%;
    z-index: 10;
    width: 90rpx;
    height: 90rpx;
    overflow: hidden;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAA/1BMVEVwcHAAAABvb29xcXFvb29ycnJycnJwcHBwcHBvb29wcHBxcXFwcHBubm5vb29ycnJ1dXVwcHBvb29vb29vb29wcHBubm5iYmJvb29wcHBxcXFubm51dXVubm5tbW1kZGRvb29wcHBvb29wcHBvb29wcHBvb29ubm5wcHBwcHB4eHhxcXFubm54eHhwcHBxcXFvb29xcXFubm5wcHBtbW1ubm5RUVFtbW1wcHBwcHBwcHBvb291dXVwcHB0dHR8fHxoaGh0dHRra2tnZ2dmZmZoaGhfX19ycnJ5eXl3d3d7e3tfX19fX19mZmZ8fHx6enpQUFB/f39UVFRPT099fX0jRRGyAAAAVXRSTlPMAMzMi7XMl8K0fjDHuXJWzIl3XFNKOAWqhlpPGAsIArymgnxvYkQ0IR8dEQ7Mop16amdfPSkZFL+UjyW6rz0tGsTAua6Bb2NgR0E1L6GVd1JNQTw14axcpAAAA41JREFUWMPF2Wdz2kAQgOG9PXIIBKKZ3rHpLaYEO07vvf//35JcBBHGSLeSjsk74y+e0TPrsxihO2Ani0Y3bp6cLRfW/XjcqvQKQ130oJqdPwaEXZwn2p2UGZq+6c7AydERSxf9EPQkNefgUWnxIBhdu0xyDt6JTME//eBrAtRxgMjaJ332QnAgZhV90Ou5EAjkHvfIdI6DvzBbJNGTh+A7bN8Q6EEMAvVBSZsGBGv6TUH3IWgo3nrSBQgeh4UHbUKoMOdKDxMQLt5zoYsxDmHtwXH6IYQvVjxG50BDmDlCD0FP+bv0TBP9vH5I50FT4vUBXWzpolEMbtPvELQVvUU3DNpE6TRlBHOfXlKu6KxHn95MaWM7dBLUZZnsOxAaOPQHpMh2VQJtOfQ1Rd51BqpEq7mjx8hJMnluXNk0ZY77NkqdO/16Rz9Ekky3py+bNl03iLJTSvWJfGrTHxUrfb71Gn9+msS5lzbdBc/iNlYvjyUd/0WaO2LTGcrMzZJgshLW7F9UvL8GNiU9aVPkKN5jsgy2RoS5EwNJr6/Uq8GisKUjgMkRYe6CpFck2aH/2DX107Qq6SpF3qcBHz1T2l1JL8GtjiPv0bLkA9WaWJK+VD0tonBIo7i3tS2PPxjYBbjUd+TDqSG9tScJOF5Z0pb7P1l2DcdoFMm/6113pT2nnssn/Rc4SgPyRyPG3C/ueK41/5w/eyVcaAA0uvkyeK51zv35DSKNd2haF/Z9TYpOO/d14SR0XtI3V6eg+5Kuz05AG88kzTonoEv2oyB3Arps06Z+Gis23WjpppE/tWkW0U1PX7ItnddNp+/v6HpCMw39Hc0yemkRY//oAtc79cKhWUwvXdujKwjKJE1aO9659Qb2gisvSNp7BFxtj/ZpluK0d7ZJkvQh39HU1Y7162ab8LZbO6BXQMgAdeLNnZ2Fa9DTo+IdesO1yPiE7dE6ty149uje07kGuu2yGdcOLSc2LvS4FQ5GNF13J4fPw9HvPfZUPwEPDHMpu9PMvAq+59RT7F8PYwHp6U/lrvt4FkhOPqUcQ2T9w3i9oZ1w9K58wviWfC6zyYg00u+MuennNGn1SnCibOR8noE13lFuFcENq8aotIOnSko6ttgEPMpclQ0vOFothjglHeczLQABhyePmIhWhqHPdseFbqS0TxuzyMWTka4T6drHH6nL8/i5dblM9dYTRuq/n6MH6jfneEGMAyi7mgAAAABJRU5ErkJggg==")
        no-repeat;
    background-size: 100%;
    text-indent: -99999px;
}
</style>

uni.getSystemInfo这个可以获取到手机的信息，比如这里要获取屏幕的高度 res.screenHeight

父组件引用子组件：

标签：混入,滚动,顶部,res,vue2,组件,uni,写法
来源： https://www.cnblogs.com/ada66/p/16308011.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2混入写法

为什么用 mixins