微信小程序(一)多个按钮选中的联动效果

场景：画图应用需选择画笔颜色，有4种颜色按钮可供选择，用户点击任意按钮进行颜色切换。

思路：通过curColorIndex变量保存当前选中的颜色下标，选中后添加额外的选中样式

布局的约束

这里通过wx：for实现循环打印颜色数组，通过curColorIndex值控制选中的样式，index值进行参数传递

onLoad:function这个函数在页面加载时就会执行一次，所以这里可以加载默认颜色数据，同时wxml用到了curColorIndex以及data_color，所以在data里定义。

用于2d平移的变换函数，其将y轴上的元素移动给定值。请注意，y轴垂直向下增加：正长度向下移动元素，而负长度向上移动元素。

translateY（<translation-value>）

横跨y轴平移的值。可以是 长度 或 百分比 值。

例子

该示例显示了三个div元素，这些元素使用translateY（）函数单独转换。

wxml

wxss

wxjs

分析： bottom-dialog-body 设置高度为300 left ， right ， bottom 都为0 开始赋值的 transform 属性为高度的100%（即：高度）用 anmation 改变 translateY 为0，设置成原来的 bottom

这个动画，都是相对于设置的 bottom 来的，但是位置是从第一次 translate 以后的位置，开始动画， 这边就第一次的 translate 和第二次的 translate 都是并列的，第一次 translate 相对于 bottom 那第二次的 translate 也是相对于 bottom

注意： 在 js 文件中， animation 调用 translateY(300) 这个单位是 px 不是 rpx 一定要特别注意

swiper

查询节点信息的对象。

wxcreateSelectorQuery

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 thiscreateSelectorQuery() 来代替。

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

在当前页面下选择匹配选择器 selector 的所有节点。

NodesRefboundingClientRect

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

function callback

回调函数，在执行 SelectorQueryexec 方法后，节点信息会在 callback 中返回。

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

在微信小程序里面玩二次元动漫游戏步骤如下：

1、打开微信小程序，并搜索或浏览二次元动漫游戏。

2、点击进入游戏页面，如果需要授权或登录账号，则按照提示进行授权或登录 *** 作。

3、进入游戏后，按照游戏指引进行游玩。

以上就是关于微信小程序(一)多个按钮选中的联动效果全部的内容，包括:微信小程序(一)多个按钮选中的联动效果、微信小程序transform: translateY的理解、微信小程序（十二）实现首页左右上下滑动项目界面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！