Vue项目小记录（包含uni-app）

• 微信轮播图 uni-app(vue)的写法：

<template>
<view class="m-banner">
			<swiper :indicator-dots="indicatorDots" indicator-color="rgba(179,179,179,1)" :autoplay="autoplay" :interval="interval"
			 :duration="duration">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<image class="m-image" :src="host + '/' + item.img"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
</template>
<script>
data(){
   indicatorDots: true,
   autoplay: true,
   interval: 4000,
   duration: 1000,
},
onLoad(data) {
const vm = this
vm.getBanner()
},

getBanner() {
const vm = this
   vm.sendRequest({
    url: 'System.Config.bannerList',
    success: res => {
    vm.banner = res.data ? res.data : []
}
});
},
</script>

<style lang="scss">

.m-banner {
		position: relative;
		bottom: 35rpx;
		margin: 0 25rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
wx-swiper .wx-swiper-dot-active {
		width: 30rpx;
		border-radius: 10rpx;
		background: #90c422;
	}
.m-image {
		width: 700rpx;
		height: 300rpx;
	}
</style>

• uni-app弹窗

<template>
<uni-popup ref="joinpop" type="center">
			<view class="m-modal">
				<view class="modal-content">
					<view class="content-text">加入赤子之心经销商</view>
					<view class="content-text">解锁下单权限</view>
				</view>
				<view class="modal-bottom">
					<view class="modal-button reset-button" @click="cancelJoin">取消</view>
					<view class="modal-button submit-button" @click="jumpJoin">确定</view>
				</view>
			</view>
		</uni-popup>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
     export default {
		components: {
			uniPopup,
		},
		methods: {
			openJoin() {
				this.$refs.joinpop.open();
			},
			cancelJoin() {
				this.$refs.joinpop.close();
			},
		},
</script>
<style>
	.m-modal {
		width: 600rpx;
		height: 350rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	}

	.modal-content {
		text-align: center;
		padding: 65rpx 0 62rpx 0;
	}

	.content-text {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		line-height: 60rpx;
	}

	.modal-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 34rpx;
	}

	.modal-button {
		text-align: center;
		line-height: 76rpx;
		width: 239rpx;
		height: 76rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.reset-button {
		border: 2rpx solid rgba(142, 195, 32, 1);
		color: rgba(142, 195, 32, 1);
	}

	.submit-button {
		background: rgba(142, 195, 32, 1);
		color: rgba(255, 255, 255, 1);
		margin-left: 50rpx;
	}
</style>

• uni-app的全局样式
  项目生产自动生产uni.scss，自动加载无需引入。可在此处@import导入其他css文件作为全局引用。
• uni-app的微信小程序全局判断登录跳转
  app.vue：

onShow: function() {
		// 当 uni-app 启动，或从后台进入前台显示
		// #ifdef MP
		this.openAutoLogin();
		let _token = uni.getStorageSync('token');
		if (!_token) {
			uni.reLaunch({
				url: '/pages/login/index/index'
			});
		}else{
			uni.reLaunch({
				url: '/pages/index/index/index'
			});
		}
		
		// #endif
	},

• main.js
  main.js作为项目入口文件，可定义全局变量。

import Vue from 'vue'
import App from './App'
import Util from './common/js/util.js'

Vue.prototype.$util = Util;
Vue.config.productionTip = false
Vue.component("mescroll-uni", MescrollUni);
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()

使用：this.$util。

• 图片撑开居中显示

<view class="m-container">
		<view class="img-box"><image :src="$util.img(showData.img)" mode="widthFix"></image></view>
</view>

.m-container {
	margin: 20rpx 15rpx 0 14rpx;
	height: 100%;
}

.m-container .img-box {
	width: 100%;
	height: 100%;
}

.m-container .img-box image {
	width: 100%;
	height: 100%;
}

• 提示并跳转到某个页面setTimeOut

this.$util.showToast({title:res.message});
setTimeout(() => {
uni.navigateBack();
}, 1500);

• 购物车数字上标

	onShow() {
		if (uni.getStorageSync('token')) {
			this.getCartCount();
		}
	},
	methods: {
		getCartCount() {
			this.sendRequest({
				url: 'System.Goods.cartCount',
				data: {},
				success: res => {
					uni.setTabBarBadge({
						index: 2,
						text: res.data + ''
					});
				}
			});
		}
	},

• 自制弹窗效果，侧边筛选

<view v-if="isChoice" @touchmove.stop.prevent="moveHandle" :style="isChoice ? 'height: 100vh' : ''">
			<view class="m-choice-layer">
				<view>热门地区</view>
				<view>热门地区</view>
				<view>热门地区</view>
				<view>热门地区</view>
				<view>热门地区</view>
				<view>热门地区</view>
			</view>
			<view class="m-choice-bg" @click="closeChoice"></view>
		</view>
.m-choice-layer {
	transition: all 0.4s ease;
	position: fixed;
	top: 90rpx;
	right: 0;
	z-index: 3;
	background-color: #fff;
	height: 80%;
	width: 637rpx;
}
.m-choice-bg {
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
	width: 750rpx;
	height: 1900rpx;
	z-index: 2;
	top: 90rpx;
	right: 0;
	overflow-y: hidden;
}

优化：

<view class="m-shade" :class="[isChoice ? 'z-cur' : '']" @click="openChoice">
			<view class="m-dialog" :class="[isChoice ? 'z-cur' : '']" @click.stop>
				<view class="item">
					<view class="title">{{ Area.title }}</view>
					<view class="wrap">
						<view class="label" :class="[item.isSelect ? 'z-cur' : '']" v-for="(item, index) in Area.list" @click="getArea(item)">{{ item.ho_spots_name }}</view>
					</view>
				</view>

				<view class="item" v-for="(item, index) in filtrate">
					<view class="title">{{ item.title }}</view>
					<view class="wrap">
						<view class="label" :class="[item2.isSelect ? 'z-cur' : '']" v-for="(item2, index2) in item.list" @click="getSelect(index, item2)">{{ item2.name }}</view>
					</view>
				</view>

				<view class="m-btn">
					<view class="left btn" @click="reset">重选</view>
					<view class="right btn" @click="search(true, true)">搜索</view>
				</view>
			</view>
		</view>
.m-shade.z-cur {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}
.m-dialog {
	position: fixed;
	right: -700rpx;
	top: 0;
	bottom: 0;
	width: 630rpx;
	background: rgba(255, 255, 255, 1);
	overflow-y: scroll;
	padding: 100rpx 30rpx;
	transition: all 1s ease;
	z-index: 1;
}
.m-dialog.z-cur {
	right: 0;
	z-index: 1;
}

.m-dialog > .item > .title {
	font-size: 32rpx;
	font-weight: 500;
	color: rgba(77, 77, 77, 1);
	line-height: 1.8;
}
.m-dialog > .item > .wrap {
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 0 30rpx;
}
.m-dialog > .item > .wrap .label {
	height: 50rpx;
	padding: 0 10rpx;
	background: rgba(245, 245, 245, 1);
	border-radius: 4rpx;
	text-align: center;
	line-height: 50rpx;
	color: #808080;
	font-size: 26rpx;
	margin-right: 30rpx;
	margin-top: 24rpx;
}

.m-dialog > .item > .wrap .label.z-cur {
	background: rgba(123, 106, 175, 1);
	color: #ffffff;
}

.m-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50rpx;
}

.m-btn .btn {
	width: 260rpx;
	height: 80rpx;
	border-radius: 40rpx;
	line-height: 80rpx;
	text-align: center;
	color: #7b6aaf;
}

.m-btn .btn.left {
	background: #eeeeee;
}

.m-btn .btn.right {
	background: #ffd431;
}