读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?

2020年7月1日 442点热度 1人点赞 0条评论

问题:在循环picker选择器时,该改变一个选项,导致全部的选项都被改变,如何操作才能实现只改变当前的操作项呢???

在js中设置一个数组变量,存储每个picker选择器默认的值;然后根据bingchange获取相应的索引、e.detail.value,根据这些更新数组,重新赋值,然后根据数组的索引、值更新相应的picker索引以及值。

代码如下:

     <view class="complex-mark">
  <view class="table-head tr">
    <view class="td">A</view>
    <view class="td">B</view>
    <view class="td">C</view>
    <view class="td">D</view>
    <view class="td">E</view>
  </view>
  <block wx:for="{{selectTeeth}}" wx:key="{{index}}" wx:for-item="itm" wx:for-index="idx">
    <view class="tr tcon">
      <view class="td">{{itm.area}}</view>
      <view class="td">{{itm.num}}</view>
      <view class="td">
        <picker bindchange="bindPickerChangek" data-current="{{idx}}" value="{{itm.indexk}}" range="{{koutong}}">
          <view class="picker">
            {{koutong[itm.indexk]}}
          </view>
        </picker>
      </view>
      <view class="td">
        <picker bindchange="bindPickerChanges" data-current="{{idx}}" value="{{itm.indexs}}" range="{{songdong}}">
          <view class="picker">{{songdong[itm.indexs]}}
          </view>
        </picker>
      </view>
      <view class="td">
        <picker bindchange="bindPickerChangem" data-current="{{idx}}" value="{{itm.indexm}}" range="{{mentong}}">
          <view class="picker"> {{mentong[itm.indexm]}}
          </view>
        </picker>
      </view>
    </view>
  </block>
</view>

js部分:

// pages/teeth/teeth.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tjType: "",
    creatTime: "",
    koutong: ["点击选择", "±", "+", "++", "+++"],
    songdong: ["点击选择", "0°", "Ⅰ°", "Ⅱ°", "Ⅲ°"],
    mentong: ["点击选择", "有", "无"],
    selectTeeth: [{
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }],

  },

  bindPickerChangek(e) {

    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexk = e.detail.value;
    this.data.selectTeeth[curindex].selectkoutong = this.data.koutong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },
  bindPickerChanges(e) {
    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexs = e.detail.value;
    this.data.selectTeeth[curindex].selectsongdong = this.data.songdong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },
  bindPickerChangem(e) {
    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexm = e.detail.value;
    this.data.selectTeeth[curindex].selectmentong = this.data.mentong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(e) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

index.wxss

page {
  background: #f2f2f2;
}

.teethNum {
  background: #fff;
  width: 100%;
}

.title {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  line-height: 140rpx;
}

.teeth {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100rpx;
}

.teeth .title {
  text-align: center;
  font-size: 16px;
}

.teeth-box {
  width: 49%;
}

.teeth-box:nth-child(1) {
  border-bottom: 1px solid #000;
}

.teeth-box:nth-child(2) {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

.teeth-box:nth-child(3) {
  border-right: 1px solid #000;
}

.number {
  display: flex;
  flex-wrap: wrap;
  width: 76%;
  justify-content: space-around;
  margin: 0 auto;
  /* margin-top: 30rpx; */
}

.number view {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  color: #666;
  border-radius: 50%;
  border: 2px solid #666;
  margin-top: 10rpx;
}

.string {
  display: flex;
  justify-content: space-around;
  margin: 24rpx auto 50rpx auto;
}

.string view {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border: 2px solid #666;
  font-size: 14px;
  border-radius: 50%;
}

.complex-btn {
  color: #20a1c4;
  text-decoration: underline;
  margin-top: 40rpx;
  padding-bottom: 30rpx;
  text-align: center;
}

.complex {
  width: 750rpx;
  background: #fff;
  padding: 20rpx 0;
  margin-top: 50rpx;
}

.complex .title .right {
  color: #58b6bf;
}

.btn {
  width: 630rpx;
  height: 100rpx;
  background: #58b6bf;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 100rpx;
  margin-top: 60rpx;
  border-radius: 5px;
}

.teethCon {
  margin: 0 auto;
}

.tr {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
}

.number  .selected {
  border: 2px solid #58b6bf;
  color: #58b6bf;
}

.tr .left {
  line-height: 75rpx;
}

.td {
  width: 20%;
  text-align: center;
}

.table-head {
  background: #A2ECF3;
  color: #fff;
  padding: 10rpx 0;
}

.table-head td {
  color: #fff;
}

.td:nth-child(2) {
  width: 8%;
}

.td:nth-child(5) {
  width: 32%;
}

.complex-mark {
  margin-top: 20rpx;
}

.tcon {
  color: #000;
}

.title {
  padding-left: 15rpx;
}
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年9月23日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
mysql JavaScript flutter Nginx 阅读 vue node hook git taro react 闲谈 redux canvas Echarts 随笔 CSS 小程序 悦读
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
【01】使用create-react-app创建react应用,快速体验react开发 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值? flutter表单样式设置参数详情 css水平垂直居中的几种方式 css超出部分设置省略号 JavaScript身份证校验源码

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号