零基础学习微信小程序（三）

一、长摁可以复制：

1 在微信小程序中实现长摁文字可以复制的功能：

2 selectable 添加这个属性即可
3 最终实现功能如下

二、单选框的实现

radio 单选框
    1 radio 标签 必须和父元素 radio-group 来使用
    2 vaule 选中的单选框的值
    3 需要给 radio-group 绑定  change事件
    4 需要在页面中显示 选中的值 

1 先在wxml中写出标签

<radio-group  bindchange="handleChange">
    <radio color="red" value="male">男</radio>
    <radio color="red" value="female">女</radio>
</radio-group>

显示出来这样子：

2、我们先看看到底点击按钮后，是否就真的选择了男或者女呢
首先在 radio-group 绑定 change事件

bindchange="handleChange"

然后在js文件中，和data并列（记得加逗号），我们来打印看看

handleChange(e) {
      console.log(e);
  }

看来选择男的时候-----我们得到的值就是male

同理，选择女的时候是femal

3、那么我们现在让页面上显示value的值

逻辑是这样的：
1、获取单选框的值；   
2 、把值赋值给data中的数据

在data当中定义数据

gender: ""

在事件中把打印的代码注释掉，换成下面的赋值语句

let gender = e.detail.value;

let 就是声明变量 

进行赋值：

this.setData({
      gender
    })

js中逻辑写完后，回到wxml中，来显示我们的value

<view>你选中的是：{{gender}}</view>

现在我们来看看有没有获取到值吧

三、复选框的实现

复选框使用   checkbox-group     checkbox  标签
单选框使用   radio-group		   radio    标签 

1、我们在js中的data数据里写一个数组
也就是能勾选的选项

data: {
    list: [
      {
        id: 0,
        name: "苹果",
        value: "apple"
      },
      {
        id: 1,
        name: "葡萄",
        value: "grape"
      },
      {
        id: 2,
        name: "香蕉",
        value: "bananer"
      }
    ],
    }

2、在wxml中使用checkbox-group和checkbox来实现复选框

我们采取循环语句来实现

<view>
    <checkbox-group >
        <checkbox 
	        value="{{item.value}}" 
	        wx:for="{{list}}" 
	        wx:key="id">
	        {{item.name}}
        </checkbox>
    </checkbox-group>
</view>

那么我们来看看效果

如果你想将值获取出来呢，和上面的单选框是一样的写法，绑定事件，进行赋值。

绑定事件

bindchange="handleItemChange"

在data中设置新属性

checkedList: []

获取复选框的值，赋值到新属性

handleItemChange(e) {
    // console.log(e);
    // 1 获取被选中的复选框的值
    const checkedList = e.detail.value;
    // 2进行赋值
    this.setData({
      checkedList
    })
  }

最终显示和单选框一样，都是显示value