收藏
回答

picker弹出选项的诡异问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug picker 客户端 6.7.3 6.7.3

各位大神,请教一个picker的问题:


默认或选中某一项后,再次点开picker选项,默认选中的是却变成了选中的下一项,示例:


1. 选中了“定期”



2. 再次点开,默认变成了 “交至约定年龄”,而不是我之前选中的“定期”。



好像每次点开之后,index被自动加了1,请问大家有遇到过这种诡异问题吗。。。


代码如下:


js:

data: {

payPeriodTypeArr: [{ value: '01', text: '定期' }, { value: '02', text: '交至约定年龄' }],

payPeriodTypeIndex: 0,

}


bindPayPeriodTypeChange: function (e) { //交费期类型

console.log('payPeriodType发生选择改变,携带值为', e.detail.value)

var that = this;

var i = e.detail.value

that.setData({

payPeriodTypeIndex: i,

})

},


wxml:

<view class="form-item">交费期类型

      <image src="{{imgServer}}arrow.png" class="arrow"></image>

<picker class="form-item-detail"  bindchange="bindPayPeriodTypeChange" value="{{payPeriodTypeArr[payPeriodTypeIndex].value}}" range="{{payPeriodTypeArr}}" range-key="text">

<view class="picker">

{{payPeriodTypeArr[payPeriodTypeIndex].text}}

</view>

</picker>

 </view>


最后一次编辑于  2018-11-11
回答关注问题邀请回答
收藏

1 个回答

  • 龚雪薇·Echo
    龚雪薇·Echo
    2018-11-12

    又来自问自答一发,把picker中的value删掉或者改为对应的index,就不会出现这个诡异的问题了。。。


    原代码:

    <view class="form-item">交费期类型

          <image src="{{imgServer}}arrow.png" class="arrow"></image>

    <picker class="form-item-detail"  bindchange="bindPayPeriodTypeChange" value="{{payPeriodTypeArr[payPeriodTypeIndex].value}}"   range="{{payPeriodTypeArr}}" range-key="text">

    <view class="picker">

    {{payPeriodTypeArr[payPeriodTypeIndex].text}}

    </view>

    </picker>

     </view>



    解决方法:

    删除 value="{{payPeriodTypeArr[payPeriodTypeIndex].value}}"  或改成 value = "{{payPeriodTypeIndex}}"


    改完:

    <view class="form-item">交费期类型

          <image src="{{imgServer}}arrow.png" class="arrow"></image>

    <picker class="form-item-detail"  bindchange="bindPayPeriodTypeChange"   range="{{payPeriodTypeArr}}" range-key="text">

    <view class="picker">

    {{payPeriodTypeArr[payPeriodTypeIndex].text}}

    </view>

    </picker>

     </view>


    问题解决,虽然还没细究原理是什么……

    2018-11-12
    有用
    回复
登录 后发表内容