WeChatミニプログラム
PSより詳細な説明を見たい場合https://www.yuque.com/fanrenfanshi/xt2g53/nfkgcy/edit#FuhdK私の言語の鳥へのリンク
カスタム属性の取得と設定のためのループトラバーサル
在wx:for里面往往我们遍历数组要对数组添加一些样式与点击操作
这个时候我们就要用到微信官方推荐的data-xx=属性的值
たとえば、この効果図と同様です
コード
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值 所以这边也对应刚刚你所定义的值
キャンセル操作をリセットして確認します
リセット要件は、スタイルをクリックするときにリセットをクリックして、選択したすべての効果をキャンセルすることです。
エフェクト画像
コード
wxmlコード
同上的代码
jsコード
//data里面定义的
currindex1: -1,
//点击重置按钮
//这其实很简单 只需要把刚刚你定义的currindex1归于最初状态
reset() {
this.setData({
currindex1: -1,
})
},
ログインページパスワードの目を見張る効果と目を閉じる効果
エフェクト画像
コード
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;
}
複数選択および複数選択クリックのニーズを実現する
エフェクト画像
コード
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 () {
}
})
