在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