RN组件之Switch与Picker

一.Switch选择开关控件

  1.该组件为Android/IOS通用的两种状态的开关组件

  2.属性方法

    (1)disabled bool:如果该值为true,用户就无法点击switch开关,默认为false

    (2)onValueChange function方法,当该组件的状态值发生变化的时候回调方法

    (3)value bool 该开关的值,如果为true,呈打开状态,默认为false

二.Picked选择器控件

  1.该控件渲染IOS和Android平台上面的原生选择器控件

  2.属性方法(通用的和Android的)

    (1)onValueChange function:当选择器被选中的时候进行调用.该方法传入一下两个参数.

        itemValue:为被选中的item的属性值

        itemPosition:该选择器被选中的item的索引position

    (2)selelctedValue any:默认选中的值.可以是字符串或整数

    (3)style pickerStyleType

    (4)testID string 用于在端对端测试中定位此视图

    (5)android enable bool :如果设为false,则会禁用此选择器.

    (6)android mode enum('dialog','dropdown')

        dialog(对话框形式):显示一个模态对话框.默认选项.

        dropdown:(下拉框形式):以选择器所在位置为锚点展开一个下拉框

    (7)android prompt string :设置选择器的提示字符串.在Android的对话框模式中用作对话框的标题.

    (8)ios itemStlye itemStylePropType:指定应用在每项标签上的样式

转载于:https://www.cnblogs.com/ZSG-DoBestMe/p/5308075.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Vant Weapp中的Picker组件和Popup组件进行组合,实现类似于选择器的效果。具体步骤如下: 1. 在需要触发选择器的元素上绑定一个点击事件,在事件处理函数中调用Popup组件的打开方法。 2. 在Popup组件中放置一个Picker组件,并设置Picker组件的数据、事件处理函数等属性。 3. 当Picker组件中的值发生变化时,通过事件处理函数将选中的值传递给父组件,并在父组件中更新需要显示的内容。 下面是一个示例代码: ```html <!-- 在需要触发选择器的元素上绑定点击事件 --> <view bindtap="showPopup">选择</view> <!-- 弹出框 --> <van-popup show="{{showPopup}}" bind:close="onClose"> <van-picker value="{{value}}" range="{{range}}" bind:change="onChange" /> </van-popup> ``` ```javascript Page({ data: { showPopup: false, value: '', range: ['选项1', '选项2', '选项3'] }, // 点击触发选择器弹出框 showPopup() { this.setData({ showPopup: true }); }, // 关闭弹出框 onClose() { this.setData({ showPopup: false }); }, // 选择器数值变化时的回调函数 onChange(event) { const { value } = event.detail; this.setData({ value, // 根据选中的值更新需要显示的内容 selectedOption: this.data.range[value] }); } }); ``` 以上代码中,当用户点击“选择”按钮时,会触发showPopup方法,将showPopup变量设置为true,从而弹出Popup组件。在Popup组件中,放置了一个Picker组件,用于选择需要的值。当用户选择完毕后,会触发Picker组件的change事件,将选中的值传递给父组件,并更新需要显示的内容。最后,在Popup组件的close事件中,将showPopup变量设置为false,关闭弹出框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值