小程序 模板使用（动画/传值）

写在前面：关于小程序，记录在项目中使用的模板，页面和模板间的传值，引入，使用方法；

第一步，新建一个文件夹（demo-template）

第二步，新建一个wxml 的文件（demo-template.wxml）

<!-- 必须有name 以便需要的页面用  is 引用  -->
<template name='radio'>
	<view class="radio-box row">
		<view animation="{{movebg}}" bindtap='switchTap' class="radio row">
			<view animation="{{move}}" class="circle">
				<view class="{{swit ? 'centerline' : 'centercir'}}"></view>
			</view>
		</view>
	</view>
</template>

第三步，新建一个wxss 的文件（demo-template.wxss）

.row {
	display: flex;
	flex-direction: row;
}

.radio-box {
	width: 50px;
	height: 100%;
	margin-right: 28rpx;
	justify-content: center;
	align-items: center;
}

.radio {
	width: 45px;
	height: 22px;
	background-color: #e0e4ed;
	/* background-color: #fe6969; */
	border-radius: 12px;
	border: 1px solid #f5f5f5;
	padding-left: 1px;
	padding-right: 1px;
	align-items: center;
}

.circle {
	width: 18px;
	height: 18px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.centerline {
	width: 2px;
	height: 16rpx;
	background-color: #e0e4ed;
}

.centercir {
	width: 5px;
	height: 5px;
	border: 1px solid #e0e4ed;
	border-radius: 50%;
	background-color: #fff;
}

第三步，在要引入的wxml 文件中使用模板

<import src="../../demo-template/demo-template.wxml" />
<!-- 注意： 相对路径 -->
<!-- 使用方式  is  data 传值 三个值swit 是选中状态 move ，movebg 是相对的动画名称-->
<template is='radio' data="{{swit,move,movebg}}" />

第四步

@import "../../demo-template/demo-template.wxss"

第五步，在引入的文件夹的.js 文件中写逻辑

data: {
   swit: false,
},
//点击按钮 单选按钮做动画
switchTap: function() {
		let swit = this.data.swit
		// 点击按钮后 
		const animation = wx.createAnimation({
			duration: 500,
			timingFunction: 'ease',
		})
		const anim = wx.createAnimation({
			duration: 500,
			timingFunction: 'ease',
		})
		this.animation = animation
		this.animation = anim
		if (swit) {
			animation.translateX(0).step()
			anim.backgroundColor('#e0e4ed').step()
			this.setData({
				move: animation.export(),
				movebg: anim,
				swit: !swit
			})
		} else {
			animation.translateX(27).step()
			anim.backgroundColor('#fe6969').step()
			this.setData({
				move: animation.export(),
				movebg: anim,
				swit: !swit
			})
		}
	},