uniapp功能实现

---

前言

一些uniapp常见功能实现

底部菜单栏tabbar

"tabBar":{
		"color":"#666",
		"selectedColor":"#1195db",
		"backgroundColor":"#FFFFFF",
		"list":[{
			"pagePath":"pages/tabbar/index/index",
			"iconPath":"static/index.png",
			"selectedIconPath":"static/index-active.png",
			"text":"首页"
		},{
			"pagePath":"pages/tabbar/news/news",
			"iconPath":"static/news.png",
			"selectedIconPath":"static/news-active.png",
			"text":"资讯"
		},{
			"pagePath":"pages/tabbar/product/product",
			"iconPath":"static/product.png",
			"selectedIconPath":"static/product-active.png",
			"text":"产品"
		},{
			"pagePath":"pages/tabbar/search/search",
			"iconPath":"static/search.png",
			"selectedIconPath":"static/search-active.png",
			"text":"发现"
		},{
			"pagePath":"pages/tabbar/my/my",
			"iconPath":"static/my.png",
			"selectedIconPath":"static/my-active.png",
			"text":"我的"
		}]
		
	}

上面原生navbar只支持首页，如果要更多页面需进行自定义组件

自定义组件如下：

自定义顶部搜索框

局部引入
easyCom components/组件名/组件名.vue

h90upx，padding20upx

<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<view class="navbar-search">
				<view class="navbar-search-icon"></view>
				<view class="navbar-search-text">高性价比重疾险</view>
			</view>
		</view>
		<view style="height: 90upx;"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.navbar{
		.navbar-fixed{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30upx;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 90upx;
			background-color: $bx-base-color;
			box-sizing: border-box;
			.navbar-search{
				display: flex;
				align-items: center;
				padding: 0 20upx;
				width: 100%;
				height: 60upx;
				background-color: #FFFFFF;
				border-radius: 60upx;
				.navbar-search-icon{
					width: 20upx;
					height: 20upx;
					border: 1px $bx-base-color solid;
					margin-right: 20upx;
				}
				.navbar-search-text{
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}

</style>

自定义固定顶部tab

<template>
	<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
		<view>
			<block v-for="(item,index) in tabdata" :key = "index">
				<view class="box" @click="tabs(index)" :class="{active:index == num}">
					<view>
						<text class="box-text" :class="{active1:index == num}">{{item}}</text>
					</view>
				</view>
			</block>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name:"tab",
		data() {
			return {
				num:0,
				tabdata:['重疾险','重疾险','重疾险','重疾险','重疾险','重疾险','重疾险']
			};
		},
		methods:{
			tabs(index){
				this.num = index
			}
		}
	}
</script>

<style lang="scss">
	.scroll{
		position: absolute;
		top: 90upx;
		left: 0;
		white-space: nowrap;
		width: 100%;
		// background-color: $bx-base-color;
		padding: 20upx;
		padding-bottom: 0;
			.box{
				width: 140upx;
				display: inline-block;
				text-align: center;
			}
			.active{
				// background-image: linear-gradient(to right,#00aaff 0%,#aaaaff 100%);
				border-bottom: 6upx solid #333333 ;
				padding-bottom: 20upx;
			}
				.box-text{
					font-size: 32upx;
					color: #cccccc;
				}
				.active1{
					color:#333333 ;
				}
	}
</style>

轮播图

图片宽高比例固定：width：100%，height：300rpx，

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiper" :key = "index" >
				<view class="swiper-item">
					<navigator url="../../news_detail/news_detail?id=8">
						<image :src="item.src" mode="widthFix" ></image>
					</navigator>
				</view>
			</swiper-item>
		</swiper>


swiper{
		height: 300rpx !important;
		
		padding: 30rpx 40rpx;
		padding-left-right: $bx-padding;
		image{
			width: 100%;
			height: 300rpx !important;
			border-radius: 20rpx;
		}
	}

url="…/…/news_detail/news_detail?id=8"接收参数

onLoad(options){
			console.log(options)
		}

弹窗

类似alert

	uni.showModal({
	    title: '提示',
	    content: '这是一个模态弹窗',
	    success: function (res) {
	        if (res.confirm) {
	            console.log('用户点击确定');
	        } else if (res.cancel) {
	            console.log('用户点击取消');
	        }
	    }
	});

下拉刷新

onReady自动加载数据
onLoad加载数据：下拉刷新
page.json加上下拉刷新

跳转

跳转到应用的另一个页面

声明式导航
navigator url?id = 80传参
如果是tabbar里的要加open-type=“switchTab”

编程点击事件@click

传参url?id = 80
页面接收上个页面传递的参数
onLoad(options){
}

跳转到外部页面

用uni.navigateTo跳转一个渲染外部链接的内部页面

渲染外部链接的内部页面

webview
各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url ！！！

https://uniapp.dcloud.io/component/web-view
webview

可能遇到的问题：

微信小程序组件：
如果时链接的微信公众号的页面，可能会遇到授权问题，加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url ！！！

链接的是h5页面防止用户操作导致用户流失等问题

---

h5浏览器页面组件：可能会遇到重定向次数过多的问题，被原服务器拒绝等

多试试！！！

api封装（暂时不用）

成功返回在vue页面处理，返回失败处理封装如下：
自动导出文件index.js
list.js以后使用，直接在这里增加原函数，改url即可
http.js
mian.js:Vue.prototype.$api=api(Vue实例)页面调用：this.$api.url({}).then(res)=>{}

以后，只用操作list.js加云函数名和页面即可

类封装

promise封装