在components中写了一段下拉菜单组件,要如何把下拉菜单中的值添加到数控中去,作为初学者,不知道其中原理,哪位大师给个案例研究下。
components中组件代码
wxml代码:
<view class='ms-content-box'>
<view class='ms-content' bindtap='selectToggle'>
<view class='ms-text'>{{selectText}}</view>
<icon class="icon"></icon>
</view>
<view class='ms-options' wx:if="{{selectShow}}">
<view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text
|| item.value || item}}</view>
</view>
</view>
jsd代码:
// components/selectnature/selectnature.js
Component({
/**
* 组件的属性列表
*/
properties: {
propArray: {
type: Array,
value:''
},
},
/**
* 组件的初始数据
*/
data: {
selectShow: false,//初始option不显示
selectText: "请选择",//初始内容
},
/**
* 组件的方法列表
*/
methods: {
//option的显示与否
selectToggle: function () {
var nowShow = this.data.selectShow;//获取当前option显示的状态
this.setData({
selectShow: !nowShow
})
},
//设置内容
setText: function (e) {
var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
var nowIdx = e.target.dataset.index;//当前点击的索引
var nowText = nowData[nowIdx].text || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容
//再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
this.setData({
selectShow: false,
selectText: nowText,
})
this.triggerEvent('select', nowData[nowIdx])
}
}
})
pages页面中的代码
wxml代码:
<!--pages/release/release-recruit/release-recruit.wxml-->
<view class="container">
<form bindsubmit="onSubmitEvent">
<selecttwo wx:for-item="{{selecttwo}}" name="{{position}}"></selecttwo>
<view class="weui-cell">
<view class="weui-cell__hd">工作性质</view>
<selectnature class="weui-cell__bd" prop-array='{{worknature}}' />
</view>
<view class="weui-cell">
<view class="weui-cell__hd">学历要求</view>
<selectnature class="weui-cell__bd" prop-array='{{educations}}' />
</view>
<view class="introduce-group">
<view class="introduce">职位描述</view>
<textarea name="content" class="textarea" placeholder="请输入您的招聘要求"></textarea>
</view>
<view class="location-group">
<view class="location-title">工作地址</view>
<view class="location-title-group" bind:tap="onLocationTap">
<view class="location-name">{{location?location.address:"请填写您的工作地址"}}</view>
<image class="arrow" src="../../../images/arrow.png"></image>
</view>
</view>
<view class="input-group">
<import src="../../input/input.wxml" />
<view class="medata">
<block wx:for="{{cccs}}" wx:key="ccc">
<view data-index="{{index}}">
<template is="medata" data="{{...item}}"></template>
</view>
</block>
</view>
</view>
<button formType="submit">提交</button>
</form>
</view>
js代码:
// pages/release/release-recruit/release-recruit.js
const db = wx.cloud.database();
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
worknature: [
// "正式工","临时工","个人","团队"
{"id": "10","value": "正式工"},
{"id": "21","value": "临时工"},
{"id": "22","value": "个人"},
{'value': '团队'}
],
educations:[
{"id": "1","value": "不限"},
{"id": "1","value": "初中"},
{"id": "1","value": "中技/中专"},
{"id": "1","value": "高中"},
{"id": "2","value": "大专"},
{"id": "1","value": "本科"},
{"id": "1","value": "硕士"},
{"id": "1","value": "博士"},
{"id": "1","value": "MBA/EMBA"},
],
cccs:[
{'id':'手机号码','name':'varchar','value':'请输入您的手机号码'},
{'id':'联系人','name':'firstName','value':'请输入您的真实姓名'},
],
location:null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const type=options.type;
this.setData({
type:type
})
this.onLocationTap();
},
/**
* 发布事件
*/
onSubmitEvent:function(event){
console.log(event);
const content = event.detail.value.content;
const location=this.data.location;
const author=app.globalData.userInfo;
wx.showLoading({
title:"正在发表中..."
})
// 特3456书yuuo莞6543李zxcz蒜7782法fgnv级
wx.cloud.callFunction({
name:"recruit",
data:{
content:content,
author:author,
location:location,
varchar:event.detail.value.varchar,
firstName:event.detail.value.firstName,
work:this.data.worknature.work
},
success:res => {
// console.log(res);
const _id = res.result._id;
if(_id){
wx.hideLoading();
wx.showToast({
title:"恭喜!发送成功!"
});
}else{
wx.showToast({
title:res.result.errMsg,
})
}
}
})
},
/**
* 打开位置页面
*/
openLocationPage:function(){
const that=this;
wx.chooseLocation({
success:res=>{
if(res.address){
delete res["errMsg"];
that.setData({
location:res
})
}
}
})
},
/**
* 获取位置信息的事件
*/
onLocationTap:function(){
const that=this;
wx.getSetting({
success:res=>{
console.log(res);
const isLocation = res.authSetting['scope.address.userLocation'];
if(isLocation){
that.openLocationPage();
}else{
wx.authorize({
scope:"scope.userLocation",
success:res=>{
that.openLocationPage();
}
})
}
}
})
},
你好,为了保持社区良好的氛围,请勿重复发帖,此贴先隐藏,感谢配合。