Uni-APP __css&JS

最新推荐文章于 2024-05-30 11:40:03 发布

工控匠

最新推荐文章于 2024-05-30 11:40:03 发布

阅读量1k

点赞数

分类专栏： UniApp 文章标签： css javascript uni-app

本文链接：https://blog.csdn.net/wanxiweilai/article/details/127790514

版权

UniApp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、关于引用样式和js算法

设置背景图片

使用view设置背景色、设置背景是否为填充。

 <view class="tit" :style="{background:'url('+titlebg+') center no-repeat'}"></view>

2. js代码封装为单独的文件

需要使用js文件的vue页面使用如下指令即可引入当前页面。页面内调用js中算法：bar.****

<script>
	import bar  from '@/pages/index/bar.js';
</script>

3. css样式引用

<style>
    @import '../../pages/index/pagea.css';
     
</style>

4.对uniapp进行二次封装

使用Promise进行封装方法的两个参数一个是正常内容，一个是异常返回内容

function textpromise(){
	 
	      let promise = new Promise(function(resolve, reject) {
	      		uni.request({
					url:'http://localhost:5218/api/read/get'
					
				}).then(responses => {
	      			// 异常
	      			if (responses[0]) {
	      				reject({message : "网络超时"});
	      			} else {
	      				let response = responses[1].data; // 如果返回的结果是data.data的，嫌麻烦可以用这个，return res,这样只返回一个data
	      				resolve(response);
	      			}
	      		}).catch(error => {
	      			reject(error);
	      		})
	      	})
	      	return promise;
	     
 
}
或者是使用
function    loadinfor()
{
	let va='23';
	let mypromise=new Promise(function(res,rej){
		uni.request({
			url:'http://localhost:5218/api/read/get',
			success: (re) => {
				 
				res(re)
			}
		})
	}) 
	return mypromise;
}

cc.loadinfor().then(res=>{
				 this.infor=res.data;
				});

5、uni-app中关于页面和导航栏的使用

（1）uni-app启动后首先显示的页面为pages.js文件中pages中第一个元素

（2）tarbar页面的使用，在tarbar中如果需要突出中间元素则需要在tabBar中配置midbutton.

在使用midbutton需要注意一下几点：

1、tabBar中list元素的数量必须为偶数（2，4....）否则无法显示

2、tabBar中使用midbutton进行切换页面注意使用uni.navigateTo(OBJECT)指令，切记不可使用uni.switchTab(OBJECT)。针对两个api的对比在下面篇幅中进行简单的对比。

"tabBar": {
		"list": [
			{
				"pagePath": "pages/Home",
				"text": "系统主页",
				"iconPath": "static/logo.png"
				 
			},
			{
				"pagePath": "pages/index/index",
				"text": "设置",
				"iconPath": "Image/1234.jpg"
			},
			{
				"pagePath": "pages/Home",
				"text": "我的"
			}
		]
	},

注意：

midbutton页面跳转建议使用switchtab

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			 uni.onTabBarMidButtonTap((e)=>{
				 console.log(1);
				 uni.switchTab({
				 	url:"/pages/pagea/pagea"
				 })
			 })
								
								 
		},
		onShow: function() { 
			console.log(123)
			
		},
		onHide: function() {
			console.log('App Hide')
		},
		
	}
</script>

<style>
	/*每个页面公共css */
</style>

uni.navigateTo(OBJECT)对比uni.switchTab(OBJECT)

navigate不能跳转至tabBar navigateTO指令不能跳转到包含在tarbar元素中定义或声明的页面。

switchtab只能跳转tabbar