小程序使用this.animate实现3维动画切换

z不像程序员的程序猿

已于 2024-08-19 18:03:18 修改

阅读量605

点赞数 3

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： this.animate 小程序使用animate 小程序实现3维动画切换 this.animate切换小程序3维动画切换

于 2024-08-09 16:48:51 首次发布

本文链接：https://blog.csdn.net/student_zz/article/details/141065835

小程序使用this.animate实现3维动画切换

这里以三张图片为例
话不多说，直接上代码

wxml

<view class="container">
	<view class="carousel" id="carousel_id">
		<view class="box" wx:for="{
   
   {items}}" wx:for-item="item" wx:for-index="index" wx:key="index" style="display: flex;flex-direction: column;transform: rotateY({
   
   {index * -120}}deg) translateZ({
   
   {translateZ}});">
			<image class="DoorLock" src="{
   
   {item.pic}}" />
		</view>
	</view>
</view>

<button type="primary" bindtap="play" style="margin-top: 200rpx;">切换</button>

js


Page({
   
   
	data: {
   
   
    translateZ: '0px',
    rotateY: 0,
		items: [
			{
   
    "name":

最低0.47元/天解锁文章

200万优质内容无限畅学