在微信小程序中,没有下拉选择菜单了。可以通过pick-view组件来实现类似的功能。
功能目标:
1、使用手指滑动选择目标服务器。
2、获取默认值和选择的目标服务器。
界面如下:
wxml:
<!– 使用pick-view选择db servers。 value用于定义默认值。 –>
<picker-view style=”height:100px” bindchange=”pickerDB” value=”{{dbindex}}” mask-style=”background-color:#D3D3D3;z-index:0;width:310px;” >
<!– mask-style用于定义被选元素的颜色。并且必须使用z-index,否则被覆盖导致无法看到。 –>
<picker-view-column >
<!– 循环data中定义的dbservers. wx.key无所谓定义。 –>
<view wx:for=”{{dbservers}}” wx:key=”index” style=”line-height: 35px;color: rgb(29, 158, 3);”>
{{item}}
</view>
</picker-view-column>
</picker-view>
js:
data: {
// 定义用于pick-view的值。
dbservers:[
“10.10.0.45”,
“10.10.0.54”,
],
// 控制pick-view的默认值。需要定义value='{{dbindex}}’.
dbindex:[0]
},
// pick-view 绑定change事件。
pickerDB(e){
// 默认pick-view只会获得data中定义的dbservers的值的index,所以还要通过这个方式获取对应的值。
dbserver=this.data.dbservers[e.detail.value];
},
// 定义执行SQL所用的公共请求函数。
sqlrequst(val){
wx.request({
url: ‘https://sxt.baiduxd.com/tget/’+val,
method:’POST’,
header:{ “Content-Type”: “application/x-www-form-urlencoded” },
data:{
// 以下参数都需要先定义并通过form提交或changebox-group事件获取
“hostname”:dbserver,
“sqltext”:sqltext,
},
success:(res)=>{
wx.showModal({
title: ‘提示’,
// 一定要注意,使用res.data显示数据内容。
content: res.data
})
}
})
},
/ 执行SQL操作后端请求操作。
exesql_45(e){
// 提交form时,pick-view默认没有选择,故判断dbserver是否被赋值。只有在发生改变时才赋值。
if(dbserver==undefined){
dbserver=’10.10.0.45′;
}
sqltext=e.detail.value.sqltext;
this.sqlrequst(‘donesql.php’);
},
感谢分享!
照葫芦画瓢,成功了,可以的。