使用pick-view选择服务器

在微信小程序中,没有下拉选择菜单了。可以通过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’);
},

使用pick-view选择服务器》有2个想法

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注