单选框/复选框/自定义组件(超详细)

单选框

效果图

官方文档https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

代码

wxml

<view>
<!-- 单选框radio
1 radio标签必须与父元素radio-group来使用
2 value选中单选框的值
3 需要给radio-group绑定change事件
 -->
 <radio-group bindchange="btnchange">
 <radio value="选项1">选项1</radio>
 <radio  value="选项2">选项2</radio>
 <radio  value="选项3">选项3</radio>
 </radio-group>
 <view>你选择的是{{gender}}</view>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:'',
  },
  btnchange(e){
   this.setData({
    gender:e.detail.value
   })
  },
})

复选框

官方文档https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

效果图

代码

PS 因为复选框选中的是数组，所以要循环渲染一下
wxml

<view>
    <checkbox-group bindchange="checkboxChange">
        <checkbox value="{{item.value}}" 
        wx:for="{{ checkbtn}}" wx:key="id"
        >{{item.name}}</checkbox>
    </checkbox-group>
    <view>你选择的为{{checkbtn1}}</view>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkbtn:[
        {
            id:'1',
            name:'选项1',
            value:'选项1'
        },
        {
            id:'2',
            name:'选项2',
            value:'选项2'
        },
        {
            id:'3',
            name:'选项3',
            value:'选项3'
        }
    ],
    chenbtn1:[]
  },
  checkboxChange(e){
      this.setData({
        checkbtn1:e.detail.value
      })
  },
  
})

自定义组件(初体验)

1. 创建组件一般组件放置components文件夹里
2. 新增组件创建对应的组件
3. 声明组件（就是在其他页面进行使用组件）

组件

首先在components文件夹创建一个组件(名字为tabs)

引用组件的页面

然后在pages文件夹的页面引入创建好的组件内容
json

{
    "component": true,
    "usingComponents": {
        "Tabs":"../../components/tabs/tabs"//这里是在这里面引用刚刚创建的组件路径
    }
}

wxml

<Tabs></Tabs>//然后在使用时直接把你在json引入组件的路径和你对应写出的名称写在这里就可以了

然后在这个页面就出现了刚引入组件的内容

自定义组件(实操)

效果图

组件

在components文件夹里面创建好组件
假设这个组件为tabs

代码

wxml

<view class="tabs">
    <view class="tabs_title">
   <view wx:for="{{list}}" wx:key="id" bindtap="btnshow" data-id="{{item.id}}"
   class="{{currindex==item.id ? 'active'  : ''}}"
   >{{item.name}}</view>
    </view>
    
    <view class="tabs_contents">
    </view>
</view>

wxss

.tabs_title{
    display: flex;
    justify-content: space-around;
}
.active{
    color: blue;
    border-bottom: 1px solid gray;
}

js

Component({
    properties: {

    },
    data: {
        currindex: 0,
        list: [{
                id: 0,
                name: "首页",
            },
            {
                id: 1,
                name: "发现",
            },
            {
                id: 2,
                name: "订单",
            },
            {
                id: 3,
                name: "我的",
            }
        ],
    },
    // 组件存放回调函数时，必须放在methods里面
    methods: {
        btnshow(e) {
            this.setData({
                currindex: e.target.dataset.id
            })
        }
    }
})

引用组件的页面

代码

json

{
    "component": true,
    "usingComponents": {
        "Tabs":"../../components/tabs/tabs"//这里是在这里面引用刚刚创建的组件路径
    }
}

wxml

<Tabs></Tabs>//然后在使用时直接把你在json引入组件的路径和你对应写出的名称写在这里就可以了