在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>
原文:https://www.cnblogs.com/ckfuture/p/14391755.html