小程序 模板使用(动画/传值)

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

第一步,新建一个文件夹(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
			})
		}
	},

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值