uni-app 自定义公用模块

元姐加油吖 發表於 2021-2-9 08:01:00

在uni-app 项目跟目录下创建common目录，然后再common目录下创建common.js用于定义公用的方法。
<img src="https://img2020.cnblogs.com/blog/2259678/202102/2259678-20210209075716697-186759748.png">
 
 common.js可以定义常量和方法：
<div class="cnblogs_code">
<pre>//接口地址
const apiUrl='';

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

//输出
export default{
apiUrl,
sayHi
}</pre>
</div>
在使用的vue中调用该模块
<div class="cnblogs_code">
<pre>import common from "../../common/common.js";</pre>
</div>
使用公用模块的常量或方法：
<div class="cnblogs_code">
<pre>data() {
 return{
 loadingTxt: '加载更多',
 newsList: [],
 common.apiUrl
 }
 },</pre>
</div>
全部代码：
<div class="cnblogs_code">
<pre><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" 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></pre>
</div>
  
来源：https://www.cnblogs.com/ckfuture/p/14391755.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 自定义公用模块