uni-app组件插入(import的使用)

 首先，在components中创建一个新的vue文件(点击文件——>新建——>创建.vue)

其次在要插入组件的主页面中使用import引入组件

在引入的组件中的样式可以在主页面中看到

 运行截图

 主页面内容:)

<template>
    <view class="container">
        <news-nav></news-nav>
        <image src="../../static/tabs/IMG_20220203_193206.jpg" mode=""></image>
    </view>
</template>

<script>
    import  newsNav from '../../components/news.vue'
    export default {
        components:{
            newsNav
        },
        data() {
            return {
                
            }
        },
        
        
        onPullDownRefresh() {//可以感知下拉刷新,刷新后list顺连续改变
            console.log('触发了下拉刷新')
            /* this.list=['UI','c++','大数据','前端','JAVA']
        uni.stopPullDownRefresh() */   
                /* 数据刷新后关闭下拉刷新 */
        setTimeout(()=>{
            //this.list=['UI','c++','大数据','前端','JAVA']
            uni.stopPullDownRefresh()
        },500)//刷新时间停留   0.5s
        },
    
        methods: {
            pullDown(){
                uni.startPullDownRefresh()
            }
        }
    }
</script>

<style lang="scss" scoped>

    .container{
        image{
    z-index: -1;
    width:100%;
    height: 100%;
    position:fixed  ;
    top:0;
    align-items: center;
        }
    
}
</style>

引入的组件内容

 

<template>

 <view>我是消息</view>

</template>

 

</script>

 

<style>

</style>