Mini programa WeChat
PD Si quieres ver una explicación más detallada https://www.yuque.com/fanrenfanshi/xt2g53/nfkgcy/edit#FuhdK Enlace a mi pájaro de idioma
Recorrido de bucle para la adquisición y configuración de atributos personalizados
在wx:for里面往往我们遍历数组要对数组添加一些样式与点击操作
这个时候我们就要用到微信官方推荐的data-xx=属性的值
Por ejemplo, similar a este diagrama de efectos
Código
wxml
<view class="pop-up" wx:if="{
{open}}">
<view class="pop-up-wri">
<!-- title -->
<!-- tiltcontent -->
<view class="pop-up-wri-main" wx:for="{
{list1}}" data-id="{
{item.id}}" wx:for-item="item" wx:for-index="index"
wx:key="index">
<view class="pop-up-wri-main-one">
{
{
item.title}}
</view>
<!-- class="pop-up-wri-main-two" pop-up-wri-main-two-show-->
<view bindtap="typeshow" data-id="{
{item1.id}}"
class="{
{currindex1 == item1.id ? 'pop-up-wri-main-two-show' : 'pop-up-wri-main-two'}}"
wx:for="{
{item.list1son}}" wx:for-item="item1" wx:for-index="index" wx:key="item.index">
{
{
item1.sontitle}}
<!-- 这个是内部按钮的图片 -->
<view data-index="{
{item1.id}}" class="pop-up-show-img"
wx:if="{
{ currindex1 == item1.id ? 'pop-up-show-img' : ''}}">
<image src="../../img/sanjiao.png"></image>
</view>
</view>
<text>\n</text>
</view>
<view class="pop-up-footer">
<view class="pop-up-skip" bindtap="reset">重置</view>
<view class="pop-up-accomplish" bindtap="btnleftshow">确认</view>
</view>
</view>
<view class="pop-ip-wrr-right"></view>
</view>
js
这个在data里面
currindex1: -1,//这个是定义索引值 必填
list1: [{
title: '种类',
id: 11,
list1son: [{
sontitle: '草莓',
id: 1
},
{
sontitle: '绿茶',
id: 2
},
{
sontitle: '香蕉',
id: 3
},
{
sontitle: '苹果',
id: 4
}
]
},
{
title: '地块',
id: 13,
list1son: [{
sontitle: '地块1',
id:5
},
{
sontitle: '地块2',
id: 6
}
]
},
{
title: '类型',
id: 12,
list1son: [{
sontitle: '植物',
id: 7
},
{
sontitle: '动物',
id: 8
}
]
}
],
//这个是你点击的操作
// 这个是点击显示xx的
typeshow(e) {
// const typeshow=this.data.item.currindex1
// const shows=typeshow['+index+']
console.log(e.target.dataset.index)
this.setData({
currindex1: e.target.dataset.id
})
},
PD
data-id="{
{item.id}}" //这里的data-你自己定义的可以随便写="{
{这个是你要获取的东西}}"
如果你想要获取不同的ID显示 你可以跟你for后定义的加上你要写的id
重点 然后你要在js定义定义 切记
currindex1: e.target.dataset.id currindex1是刚刚你定义的要写显示的索引 必写的一个
e.target.dataset.id e.target.dataset后面跟的是你自己定义的东西,不是死的 切记
因为刚刚你定义了ID值 所以这边也对应刚刚你所定义的值
Reiniciar y confirmar cancelar operación
El requisito de restablecimiento es hacer clic en restablecer al hacer clic en el estilo para cancelar todos los efectos seleccionados
Imagen de efecto
Código
código wxml
同上的代码
código js
//data里面定义的
currindex1: -1,
//点击重置按钮
//这其实很简单 只需要把刚刚你定义的currindex1归于最初状态
reset() {
this.setData({
currindex1: -1,
})
},
Efecto revelador y cerrado de la contraseña de la página de inicio de sesión
Este es el icono con los ojos abiertos y los ojos cerrados.
Imagen de efecto
Código
wxml
<view class='parentstyle '>
<view class='centerStyle' bindtap="yyy">
<input password='{
{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
<image wx:if="{
{yang}}" src='{
{defaultType? "../../img/icon/login/icon_eye_off.png": "../../img/icon/login/icon_eye_on.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
</view>
</view>
js
Page({
data: {
defaultType: true,
passwordType: true,
yang:false
},
//defaultType：眼睛状态 passwordType：密码可见与否状态
eyeStatus: function(){
this.data.defaultType= !this.data.defaultType
this.data.passwordType= !this.data.passwordType
this.setData({
defaultType: this.data.defaultType,
passwordType: this.data.passwordType,
})
},
yyy(){
this.setData({
yang:true
})
}
})
wxss
.parentstyle {
display: flex;
align-items: center;
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #e0e0e0;
margin: 30rpx 38px;
padding: 20rpx;
}
.parentstyle .imageStyle {
width: 41rpx;
height: 41rpx;
margin-right: 20rpx;
}
.parentstyle .centerStyle {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
}
Darse cuenta de las necesidades del clic de selección múltiple y selección múltiple
Imagen de efecto
Código
wxml
<view class="main">
<view class="header" catchtap='checkedTap'>
全选 <radio bindtap="selectall" class="header-radio" checked="{
{checked}}"></radio>
</view>
<view class="content">
<view class="content-se" wx:for="{
{list}}"
data-index="{
{index}}" wx:key="*this" bindtap="diseaseSwitch"
>
<!-- se-one show-one-->
<radio data-index="{
{index}}" class="{
{item.checked ? 'show-one' : 'se-one' }}" checked="{
{item.checked}}" ></radio>
<!-- se-two show-se-two -->
<view class="{
{item.checked ? 'show-se-two' : ' se-two'}}"></view>
<!-- se-three show-three -->
<view class="{
{item.checked ? 'show-three ' : 'se-three'}}">{
{
item.title}}</view>
</view>
</view>
</view>
wxss
.header-radio {
/* 这个是更改单选按钮的大小啊 */
transform: scale(0.9);
}
.se-one {
transform: scale(0);
position: absolute;
top: -3%;
right: 58%;
}
.show-one {
position: absolute;
top: -3%;
right: 58%;
transform: scale(0.9);
}
.se-two {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: black;
}
.show-se-two {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: gray;
}
.show-three{
position: absolute;
bottom: -3%;
right: 61%;
color: red;
}
.content-se {
float: left;
width: 180px;
height: 100px;
position: relative;
margin: 2px;
margin-top: 10px;
}
.se-three {
position: absolute;
bottom: -3%;
right: 61%;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
select_all:false,
list: [{
title: '杨幂',
checked: false,
},
{
title: '杨幂1号',
checked: false,
},
{
title: '杨幂2号',
checked: false,
},
{
title: '杨幂3号',
checked: false,
},
{
title: '杨幂4号',
checked: false,
},
]
},
// 这个是单击按钮选择取消状态
checkedTap() {
var checked = this.data.checked; //获取选中的值
this.setData({
"checked": !checked
})
},
// 这个是点击全选
selectall() {
// 这里面的长度是你定义的数组
var that = this;
for (let i = 0; i < that.data.list.length; i++) {
that.data.list[i].checked = (!that.data.select_all)
}
that.setData({
list: that.data.list,
select_all: (!that.data.select_all),
})
},
// 这个是点击多选的操作
diseaseSwitch: function (options) {
let that = this;
// 按钮索引
var index = options.currentTarget.dataset.index;
// 索引对应内容
var item = that.data.list[index];
// 选中，未选中状态切换
item.checked = !item.checked;
// 更新
that.setData({
list: that.data.list
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
