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,
})
},