写小程序常用到的知识点2

题库多选题

<view class="questionBottom">
	<view class="option" :class="{'active': isChange.indexOf(index)!=-1}" v-for="(item, index) in list" :key="index" @click="clickBtn(index)">
		{{String.fromCharCode(65+index)+'.'}}&nbsp;&nbsp;{{item}}
	</view>
</view>

• list是答案列表，循环显示出来。
• {{String.fromCharCode(65+index)+‘.’}}循环显示出ABCD来
• indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
  如果没有找到匹配的字符串则返回 -1。
  注意： indexOf() 方法区分大小写。
• isChange存储选择的答案，如果包含index则视为选中，class使用‘active’

data() {
		return {
			isChange: [], //选择的答案
			list: ['实体经济', '新型工业化', '数字工业化', '数字中国'], //选项
		}
	},
	methods: {
		clickBtn(index) {
			// 多选
			if (this.isChange.indexOf(index) == -1) {
				if (this.isChange.length == 4) {
					uni.showToast({
						title: '最多选择四项',
						icon: 'none'
					})
				} else {
					this.isChange.push(index); //选中的选项的index添加到数组里
					console.log("选择了：" + this.isChange);
				}
			} else {
				this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中
				console.log("选择了：" + this.isChange);
			}
			//转变成选项内容
			let list2 = []
			for (let index in this.isChange) {
				list2.push(this.list[this.isChange[index]])
				console.log("list2：" + list2);
			}
		},
	}

/* 选项部分 */
.questionBottom {
	display: block;
	display: flex;
	flex-direction: column;
	margin: 50rpx 22rpx 0 22rpx;
	height: 100%;
}

.option {
	width: 100%;
	height: 100rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	background-color: #EFEFEF;
	text-indent: 2em;
	/* 首行缩进 */
	font-family: Source Han Sans CN;
	font-size: 16px;
	font-weight: 550;
	line-height: 100rpx;
	color: #3D3D3D;
}

/* 选中后的状态 */
.active {
	border: 2rpx solid #CC0606;
	box-sizing: border-box;
	/* 内边框 */
	color: #CC0606;
}

margin-right不起作用

• 父容器设relative 子容器设absolute

.examBox_2{
	display: flex;
	flex-direction: row;
	font-family: Source Han Sans CN;
	font-size: 14px;
	font-weight: normal;
	position: relative;
}
.examBtn{
	background-color: rgba(204, 6, 6, 0.6);
	width: 176rpx;
	height: 66rpx;
	border-radius: 18rpx;
	position: absolute;
	right: 22rpx;
	top: -10rpx;
}

渐变色背景

• 从上往下渐变（红色---->白色）颜色可以写多个

background: -webkit-linear-gradient(top,#CC0606,white);

倒计时

1. 导入倒计时插件，定义时间

import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue'
	export default {
		data() {
			return {
				d: 0,
				h: 0,
				m: 30, 
				s: 0,
			}
		},
		components: {
			uniCountdown
		},

2. view中，day不显示:show-day=‘false’，其他的时间不显示的方法参考下方链接
   倒计时插件

 <view class="countdownTime">
	<uniCountdown :day="d" :hour="h" :minute="m" :second="s" :show-day='false'></uniCountdown>
 </view>

底部弹出框（答题卡）

用的uni-app组件uni-popup

<template>
	<view>
		<view @click="toggle('bottom')">dianji</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="answerSheet">
					写内容
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
		}
	}
</script>

<style>
.answerSheet{
	width: 100%;
	height: 900rpx;
}
</style>

引用外部文字

.num{
	font-family:electronicFont; 
}

在style中引用外部文字

 @font-face{
	 font-family:electronicFont;
	 src:url("/static/font/DS-Digital/DS-DIGIT-4.ttf")
	 }

v-for循环出来 改变前三个字体的颜色

.num{
	color: #707070;   //默认颜色
}

把循环列表中加入color键

export default {
		data() {
			return {
				namelist:[
					{name:'王XX',integral:'5900'},
					{name:'李XX',integral:'5900'},
					{name:'赵XX',integral:'5800'},
					{name:'孙XX',integral:'5700'},
					{name:'安XX',integral:'5650'},
					{name:'孟XX',integral:'5640'},
					],
				colorList: ['#D81F07','#EFC54E','#1296DB'],
			
			}
		},
		onLoad() {
			this.namelist.forEach((item, index) => {
				item.color = this.colorList[index]
			})
		},

• 增加新的属性值

<view class="nameList" v-for="(item,index) in namelist" :key="index">
		<view class="num" :style="{'color':item.color}">{{index+1}}</view>
		<view class="tx">XX</view>
		<view class="name">{{item.name}}</view>
</view>

position居中

.fuli{
		width: 60%;
		height: 120rpx;
		position: absolute;
		z-index: 999;
		top:220px;
		left:50%;
		transform:translate(-50%,-50%);
		background-color: #FFFFFF;
		border: 1rpx solid #ECECEC;
	}

取消uniapp原生导航栏的返回键

在要取消的页面里加一句这个

mounted() {
	//原生状态栏取消返回键
	let a = document.getElementsByClassName('uni-page-head-hd')[0]
	a.style.display = 'none'
},

uni-app添加视频插件

<video class="video" :controls="true" 
:show-center-play-btn="true" 
objectFit="fill" 
poster="https://tse4-mm.cn…………" 
src="https://img.cdn.…….m4v">
</video>

视频插件

动态style标签

:style="{'height':vHeight + 'px', 'background':'#FF9900'}"