WeChat Mini Program
PS If you want to see a more detailed explanation https://www.yuque.com/fanrenfanshi/xt2g53/nfkgcy/edit#FuhdK Link to my language
Loop traversal for custom attribute acquisition and setting
在wx:for里面往往我们遍历数组要对数组添加一些样式与点击操作
这个时候我们就要用到微信官方推荐的data-xx=属性的值
For example, similar to this effect diagram
Code
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
})
},
PS
data-id="{
{item.id}}" //这里的data-你自己定义的可以随便写="{
{这个是你要获取的东西}}"
如果你想要获取不同的ID显示 你可以跟你for后定义的加上你要写的id
重点 然后你要在js定义定义 切记
currindex1: e.target.dataset.id currindex1是刚刚你定义的要写显示的索引 必写的一个
e.target.dataset.id e.target.dataset后面跟的是你自己定义的东西,不是死的 切记
因为刚刚你定义了ID值 所以这边也对应刚刚你所定义的值
Reset and confirm cancel operation
The reset requirement is to click reset when clicking the style to cancel all selected effects
Effect picture
Code
wxml code
同上的代码
js code
//data里面定义的
currindex1: -1,
//点击重置按钮
//这其实很简单 只需要把刚刚你定义的currindex1归于最初状态
reset() {
this.setData({
currindex1: -1,
})
},
Eye-opening and eye-closing effect of login page password
This is the icon with eyes open and eyes closed
Effect picture
Code
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;
}
Realize the needs of multi-select and multi-select click
Effect picture
Code
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 () {
}
})
