收藏
回答

picker组件,当选择第一个或者没有选择时,如何默认内容显示?

picker组件,当我选择了第一个,或者没有进行选择,显示内容,当选择第二个内容时,第一个隐藏显示第二个内容,我现在需要的是,当打开页面时,就默认显示第一张图的内容,或者选择了第一个选项显示,这个默认显示该怎么实现,如图:

wxml代码:

<view class="carpooling-group">
  <view class="carpooling-list">
    <view class="carpooling-title">拼车类型</view>
    <picker class="carpooling-option" name="education" range='{{title}}' value="{{title[choice]}}" bindchange="onEducationEvent">
      <view class='ms-text'>{{title[choice]?title[choice]:'请选择拼车类型'}}</view>
    </picker>
  </view>
  <import src="../../input/input.wxml" />
  <view class="medata">
    <block wx:for="{{cars}}" wx:key="car">
      <view data-index="{{index}}">
        <template is="medata" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  <!-- 我要找车 -->
  <import src="../../input/input.wxml" />
  <view class="medata">
    <block wx:if="{{choice==0}}" wx:for="{{vehicle}}" wx:key="vehicle">
      <view data-index="{{index}}">
        <template is="medata" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  <!-- 我要找人 -->
  <import src="../../input/input.wxml" />
  <view class="medata">
    <block wx:if="{{choice==1}}" wx:for="{{carpooling}}" wx:key="carpooling">
      <view catchtap="OnDatailsEvent" data-index="{{index}}">
        <template is="medata" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  <!-- 我找货车 -->
  <import src="../../input/input.wxml" />
  <view class="medata">
    <block wx:if="{{choice==2}}" wx:for="{{truck}}" wx:key="truck">
      <view catchtap="OnDatailsEvent" data-index="{{index}}">
        <template is="medata" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  <!-- 我要找货 -->
  <import src="../../input/input.wxml" />
  <view class="medata">
    <block wx:if="{{choice==3}}" wx:for="{{goods}}" wx:key="goods">
      <view catchtap="OnDatailsEvent" data-index="{{index}}">
        <template is="medata" data="{{...item}}"></template>
      </view>
    </block>
  </view>
  <view class="introduce-group">
    <view class="introduce">备注</view>
    <textarea class="introduce-centent"></textarea>
  </view>
  <button>提交</button>
</view>

js代码:
data: {
    cars:[
      {'id':'出发时间','name':'','value':'出发时间'},
      {'id':'时间补充','name':'','value':'时间补充'},
      {'id':'始发地','name':'','value':'始发地'},
      {'id':'终点','name':'','value':'终点'},
    ],
    vehicle:[
     
      {'id':'车型','name':'','value':'车型'},
      {'id':'人数','name':'','value':'人数'},
      {'id':'联系电话','name':'','value':'手机号码'},
    ],
    carpooling:[
      {'id':'途径','name':'','value':'途径'},
      {'id':'车型','name':'','value':'车型'},
      {'id':'空位','name':'','value':'空位'},
      {'id':'联系电话','name':'','value':'手机号码'},
    ],
    truck:[
      {'id':'车型','name':'','value':'车型'},
      {'id':'货物重量','name':'','value':'吨'},
      {'id':'货物尺寸','name':'','value':'例:3米x2米x1米'},
      {'id':'联系电话','name':'','value':'手机号码'},
      
    ],
    goods:[
      {'id':'途径','name':'','value':'途径'},
      {'id':'车型','name':'','value':'车型'},
      {'id':'载重','name':'','value':'吨'},
      {'id':'货箱尺寸','name':'','value':'例:3米x2米x1米'},
      {'id':'联系电话','name':'','value':'手机号码'},
    ],
    title:["我要找车","我要找人","我找货车","我要找货",]
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const type=options.type;
    this.setData({
      type:type
    })
  },
  onEducationEvent:function(event){
    // console.log(event);
    const choice = event.detail.value;
    this.setData({
      choice:choice,
    })
  },
回答关注问题邀请回答
收藏
登录 后发表内容