uni-app 自定義公用模塊

在uni-app 項目跟目錄下創建common目錄，然后再common目錄下創建common.js用於定義公用的方法。

 

 common.js可以定義常量和方法：

//接口地址
const apiUrl='';

//定義公用方法
const sayHi=function(){
    console.log('hi');
}


//輸出
export default{
    apiUrl,
    sayHi
}

在使用的vue中調用該模塊

import common from "../../common/common.js";

使用公用模塊的常量或方法：

data() {
            return{
                loadingTxt: '加載更多',
                newsList: [],
                common.apiUrl
            }
        },

全部代碼：

<template>
    <view style="flex-wrap: wrap;">
        <!-- 輪播圖 -->
        <swiper indicator-dots="true" autoplay="true" >
            <swiper-item>
                <image src="/static/image/BasicsBg.png"></image>
            </swiper-item>
            <swiper-item>
                <image src="/static/image/componentBg.png"></image>
            </swiper-item>
            <swiper-item>
                冷鏈App
            </swiper-item>
        </swiper>
        <!-- 顯示數據 -->
        <!-- <navigator class="news-list" :url="'./info?newsid='+item.newsid" v-for="(item,index) in newsList"> -->
        <navigator class="news-list" url="./info" v-for="(item,index) in newsList">
            <image src="../../static/image/component_cur.png" mode="widthFix"></image>
            <View class="news-title">
                {{item}}
            </View>
        </navigator>
        
        
        <!-- 加載視圖 -->
        <view class="loading">{{loadingTxt}}</view>
    </view>
</template>

<script>
    import common from "../../common/common.js";
    var _self,page=1,timer=null;
    export default {
        data() {
            return{
                loadingTxt: '加載更多',
                newsList: [],
                common.apiUrl
            }
        },
        onLoad:function(){//初始化加載
            this.getNews();
            _self=this;
            uni.showLoading({
                title:'歡迎使用App'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
        },
        onPullDownRefresh:function(){//下拉刷新監聽方法
            this.getNews();
        },
        onReachBottom: function(){//上拉加載監聽方法
            this.getMoreNews();
            if(timer!=null){clearTimeout(timer);}
            timer=setTimeout(function(){
                _self.getMoreNews();
            },5000);
        },
        methods:{
            getNews:function(){
                page=1;
                //顯示加載中動畫
                uni.showNavigationBarLoading();
                //請求數據
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    //url: 'https://www.easy-mock.com/mock/5bb833775df5622d84ac87ca/example/news#!method=get',
                    success:function(res){
                        console.log(res);
                        var newsList=res.data.split('--hcSplitor--');;
                        _self.newsList=newsList;
                        //成功獲取數據后結束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功獲取數據后隱藏加載動畫
                        uni.hideNavigationBarLoading();
                        page++;
                    }
                })
            },
            getMoreNews:function(){
                //判斷是否已經加載全部
                if(_self.loadingTxt=='已經加載全部'){return false;}
                _self.loadingTxt='加載中';
                //顯示加載中動畫
                uni.showNavigationBarLoading();
                //請求數據
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        uni.hideNavigationBarLoading();
                        if(res.data==null){
                            _self.loadingTxt='已經加載全部';
                            return false;
                        }
                        var newsList=res.data.split('--hcSplitor--');
                        _self.newsList=_self.newsList.concat(newsList);
                        //成功獲取數據后結束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功獲取數據后隱藏加載動畫
                        uni.hideNavigationBarLoading();
                        page++;
                        _self.loadingTxt='加載更多';
                    }
                })
            }
            
            
        }
    }
</script>

<style>
view{width:100%}
swiper-item{
    background: #00FF00;
    height: 200px;
    width: 100%;
}
swiper-item image{
    width: 100%;
}
.loading{
    line-height: 2em;
    text-align: center;
    color:#888;
    margin-top: 30px;
}
.news-list{
    display: flex;
    width: 94%;
    padding: 1upx 3%;
    flex-wrap: nowrap;
    margin: 12upx 0;
}
.news-list image{
    width: 150upx;
    margin-right: 12upx;
    flex-shrink: 0;
}
.news-title{
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-size: 28upx;
}
</style>