小程序-循环修改状态

Posted 野香蕉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序-循环修改状态相关的知识,希望对你有一定的参考价值。

 

 

wxml 代码如下

<view class="storebox">
<view class="per_box">
<text class="per_title">产品系列:</text>
<view class=\'select-box\'>
<picker class=\'picker\' bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="{{\'title\'}}">
<view class=\'select\'> {{arrayValue ? arrayValue : \'请选择产品系列\' }}
<image class=\'select-img\' src="../../static/images/r.png" ></image>
</view>
</picker>
</view>

<block wx:for="{{objList}}" wx:key="{{indexObjList}}" wx:for-item="vieorow">
 
<view class=\'select-box\'>
<picker class=\'picker\' bindchange="bindPickerShopChange" data-index = \'{{index}}\' range="{{vieorow.shop}}" range-key="{{\'title\'}}" >
<view class=\'select\'> {{vieorow.shopVal ?vieorow. shopVal : \'请选择店铺\' }}
<image class=\'select-img\' src="../../static/images/r.png" ></image>
</view>
</picker>
</view>

<view class="per_sex">
<view class="{{vieorow.status == 1 ? \'click\' : \'\'}}" catchtap="selectShop2" data-index = \'{{index}}\'>主店</view>
<view class="{{vieorow.status == 2 ? \'click\' : \'\'}}" catchtap="selectShop1" data-index = \'{{index}}\'>划店</view>
<view class="selects">
<picker class=\'picker text\' bindchange="bindPickerDayChange" data-index = \'{{index}}\' range="{{vieorow.day}}" range-key="{{\'title\'}}">
<view class=\'selects\'> {{vieorow.dayVal ? vieorow.dayVal : \'第几天\' }}
<image class=\'select-img\' src="../../static/images/r.png" ></image>
</view>
</picker>
</view>
</view>
 
</block>

 
<view class="submit" >保存提交</view>
</view>


  </view>
 
css 
/*内容*/
.per_box{
  width:100%;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.per_title{
  font-size: 34rpx;
  color: #333333;
  line-height: 50rpx;
}
.per_box .select-box{
  width: 100%;
  height:80rpx;
  border:1px solid #d2d2d2;
  box-sizing: border-box;
border-radius: 4px;
  margin-bottom: 20rpx;
padding-left:
}
.per_box view input{
  width: 100%;
  height:80rpx;
  text-indent: 60rpx;
  border:none;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #333333;
  background: none;
}

.per_box view:nth-child(4) input{
  width: 50%;
}
.per_box view:nth-child(4) span{
  float: right;
  font-size: 30rpx;
  color: #999999;
  line-height: 0.6rem;
  width: 40%;
  text-align: center;
}
.per_sex{
  border:none !important;
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.per_sex view{
  width: 30%;
  height:80rpx;
  border:1px solid #d2d2d2;
  box-sizing: border-box;
  font-size: 30rpx;
  color:#333;
  text-align: center;
  line-height: 80rpx;
}
.per_sex .selects view{
  width: 100%;
border: none;
}
.per_box .per_sex .click{
  border:1px solid #333333;
}

.submit{
  margin: 20rpx 0;
  font-size: 30rpx;
  color:#FFFFFF;
  text-align: center;
  line-height: 80rpx;
  background: #bca879;
margin-bottom: 50rpx;
}

.select-box{
display: flex;
align-items:center;
/* padding-left:30rpx; */
}
.select{
font-size: 30rpx;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
}
.select-img{
width:30rpx;
height:30rpx;
}
.picker{
width: 100%;
}
 
js 
 
/**
* 商品系列选择--监听页面加载
*/
bindPickerChange: function (e) {
// console.log(\'picker发送选择改变,携带值为\', e)
this.setData({
arrayValue: this.data.array[e.detail.value].title,
arrayId: this.data.array[e.detail.value].id
})
},
/**
* 商品系列选择--监听页面加载
*/
bindPickerDayChange: function (e) {
// 获取当前点击下标
var Index = e.currentTarget.dataset.index;
var Val = this.data.objList[Index].day[e.detail.value].title;

// data中获取列表
var shopArr = this.data.objList;
for (let i in shopArr) {
//遍历列表数据
if (i == Index) {
//根据下标找到目标,改变状态
shopArr[i].dayVal = Val;
}
}

//数组重新赋值
this.setData({
objList: shopArr
})
},

/**
* 商店选择--监听页面加载
*/
bindPickerShopChange: function (e) {
// 获取当前点击下标
var Index = e.currentTarget.dataset.index;
var Val = this.data.objList[Index].shop[e.detail.value].title;

// data中获取列表
var shopArr = this.data.objList;
for (let i in shopArr) {
//遍历列表数据
if (i == Index) {
//根据下标找到目标,改变状态
shopArr[i].shopVal = Val;
}
}

//数组重新赋值
this.setData({
objList: shopArr
})
},
 
/**
* 划店 主店切换--加载
*/
selectShop1: function (e) {
// 获取当前点击下标
var Index = e.currentTarget.dataset.index;

// data中获取列表
var shopArr = this.data.objList;
for (let i in shopArr) {
//遍历列表数据
if (i == Index) {
//根据下标找到目标,改变状态
if (shopArr[i].status == 1) {
shopArr[i].status = parseInt(shopArr[i].status) + 1
}
}
}

//数组重新赋值
this.setData({
objList: shopArr
})
},

/**
* 划店 主店切换--加载
*/
selectShop2: function (e) {
// 获取当前点击下标
var Index = e.currentTarget.dataset.index;

// data中获取列表
var shopArr = this.data.objList;
for (let i in shopArr) {
//遍历列表数据
if (i == Index) {
//根据下标找到目标,改变状态
if (shopArr[i].status == 2) {
shopArr[i].status = parseInt(shopArr[i].status) - 1
}
}
}

//数组重新赋值
this.setData({
objList: shopArr
})
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.addWeb();
},
 
 
 

以上是关于小程序-循环修改状态的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序播放背景音乐

微信小程序数组里的值修改,for循环修改数组内容

微信小程序点击按钮,修改状态

微信小程序怎么pe修改数据

微信小程序一直保持登陆状态

记录一下做小程序tab切换并保存check选中状态的操作。