微信小程序自定义组件实现单选功能

2024-09-28 14:37:20

本文实例为大家分享了微信小程序自定义组件实现单选的具体代码，供大家参考，具体内容如下

效果图：

调用部分（例如在index页面）

index.wxml

<view catchtap="showSinger">
  单选按钮
  <singer id="singer" bind:singerCancel="_singerCancel" bind:singerConfirm="_singerConfirm" singerContent='{{singerContent}}' singer_list="{{singer_list}}">
  </singer>
</view>

index.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
  
    singerContent: '单选按钮',
    singer_list: [{
      key: "100以下",
      name: "100以下"
    }, {
      key: "200以下",
      name: "200以下"
    }, {
      key: "300以下",
      name: "300以下"
    }, {
      key: "400以下",
      name: "400以下"
    }, {
      key: "500以下",
      name: "500以下"
    }, {
      key: "600以下",
      name: "600以下"
    }, {
      key: "700以下",
      name: "700以下"
    }, {
      key: "800以下",
      name: "800以下"
    }, {
      key: "900以下",
      name: "900以下"
    }, {
      key: "1000以下",
      name: "1000以下"
    }],
 
   
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    //获得input_select组件
    this.input_select = this.selectComponent("#input_select");
 
    //获得singer组件 单选
    this.singer = this.selectComponent("#singer");
 
    //获得multiple组件  多选
    this.multiple = this.selectComponent("#multiple");
  },
 
 
  //**************************************单选自定义组件部分************************
  showSinger: function() {
    this.singer.showSinger();
  },
 
  //取消事件
  _singerCancel() {
    console.log('你点击了取消');
    this.singer.hideSinger();
  },
  //确认事件
  _singerConfirm(e) {
    console.log('你点击了确定==', e.detail);
    this.singer.hideSinger();
  },
 
})

index.json

{
  "usingComponents": {
    "singer": "/component/selector/singer/singer",
  }
}

自定义组件部分（命名为singer）

singer.wxml

<!--component/selector/singer.wxml-->
<view class='singer-bg' wx:if="{{isShow}}">
  <view class='singer-body'>
    <view class='singer-body-name'>
      <view class='singer-body-name-line'></view>
      <view class='singer-body-name-txt'>{{singerContent}}</view>
      <view class='singer-body-name-line'></view>
    </view>
    <view class='singer-body-list'>
      <block wx:for="{{singer_list}}" wx:for-item="item" wx:key="unique">
        <view class='list-item-choosed' wx:if="{{choose_type==item.key}}" data-key='{{item.key}}' bindtap='clicktype'>
          <view class='item-choosed-txt'>{{item.name}}</view>
        </view>
        <view class='list-item' data-key='{{item.key}}' bindtap='clicktype' wx:else>
          <view class='item-txt'>{{item.name}}</view>
        </view>
      </block>
    </view>
    <view class='singer-body-kongbai'></view>
    <view class='singer-body-icon'>
      <view class='icon-left' catchtap='_singerCancel'>重置</view>
      <view class='icon-right' catchtap='_singerConfirm'>确定</view>
    </view>
  </view>
</view>

singer.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //标题文字
    singerContent: {
      type: String,
      value: ''
    },
    singer_list: {
      type: Array,
      value: [{
        key: '',
        name: ''
      }, ]
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    isShow: false,
    choose_type: "",
  },
  onLoad: function() {
    this.properties
  },
  /**
   * 组件的方法列表
   */
  methods: {
    clicktype: function(e) {
      this.setData({
        choose_type: e.currentTarget.dataset.key,
      })
    },
    //隐藏弹框
    hideSinger: function() {
      this.setData({
        isShow: false,
        json: {
          start: "",
          end: "",
        }
      })
    },
    //展示弹框
    showSinger: function() {
      this.setData({
        isShow: true,
      })
    },
    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */
    _singerCancel() {
      //触发取消回调
      this.triggerEvent("singerCancel")
    },
    _singerConfirm() {
      //触发成功回调
      this.triggerEvent("singerConfirm", this.data.choose_type);
    }
  }
})

singer.json

{
  "component": true
}

singer.wxss

/* component/selector/singer.wxss */
 
.singer-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}
 
.singer-bg .singer-body {
  min-width: 100%;
  width: 100%;
  height: 968rpx;
  max-height: 968rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}
 
.singer-bg .singer-body .singer-body-name {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
  margin-bottom: 50rpx;
}
 
.singer-bg .singer-body .singer-body-name .singer-body-name-line {
  width: 260rpx;
  border-bottom: 2rpx solid rgba(240, 240, 240, 1);
}
 
.singer-bg .singer-body .singer-body-name .singer-body-name-txt {
  height: 48rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 48rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
 
.singer-bg .singer-body .singer-body-list {
  width: 100%;
  max-height: 650rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0rpx 10rpx 0rpx 40rpx;
  overflow: auto;
}
 
.singer-bg .singer-body .singer-body-list .list-item-choosed {
  width: 182rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(191, 213, 236, 1);
  border-radius: 6rpx;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
}
 
.singer-bg .singer-body .singer-body-list .list-item-choosed .item-choosed-txt {
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 70rpx;
  color: rgba(0, 89, 179, 1);
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
 
/**/
 
.singer-bg .singer-body .singer-body-list .list-item {
  width: 182rpx;
  height: 70rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgba(240, 240, 240, 1);
  border-radius: 6rpx;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
}
 
.singer-bg .singer-body .singer-body-list .list-item  .item-txt {
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
 
.singer-bg .singer-body .singer-body-kongbai {
  width: 100%;
  height: 120rpx;
}
 
.singer-bg .singer-body .singer-body-icon {
  width: 100%;
  height: 110rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  z-index: 9999999999;
  background: rgba(255, 255, 255, 1);
}
 
.singer-bg .singer-body .singer-body-icon .icon-left {
  width: 374rpx;
  height: 110rpx;
  background: rgba(0, 89, 179, 0.1);
  font-size: 36rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 89, 179, 1);
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.singer-bg .singer-body .singer-body-icon .icon-right {
  width: 374rpx;
  height: 110rpx;
  background: rgba(0, 89, 179, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序单选框自定义赋值

这里我们应用之前一篇写过的弹框效果,单选框我们运用伪元素自定义,不使用图片, 这个例子可以运用到很多情况: 知识点: 1.理解wx:if作用 2.理解三元运算符的使用 3.利用伪元素after/before自定义内容 4.定时器setTimeout的使用照例先上代码 wxml部分: <view class='input-list'> <view class='list-l'>预计到店</view> <view class='list-r' bindtap='po
微信小程序实现单选按钮

本文实例为大家分享了微信小程序实现单选按钮的具体代码,供大家参考,具体内容如下逻辑单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一致的时候就把checked 设置为true,其他的时候把checked设置为 false 只需要一次循环. 复选框的逻辑,也不复杂,当只有一个被选中的选项的时候,当点击已经选择的选项的时候,首选外层循环设置为false,这个时候 e.detail.value为零,所以无法进入内层循环,所以被取消.当选中未选择的选项
微信小程序单选radio及多选checkbox按钮用法示例

本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v
微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
微信小程序自定义单选框样式实现单选功能

本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码,供大家参考,具体内容如下实现效果: 选择小车时,其他类型的车取消选中. 具体思路: 用数组存几种类型车的数据,给每条数据设置点击未选中的效果(checked 设为 false).点击某一种车时,获取其下标,将它的设置为选中(checked 设置 true). 代码如下: // index.js Page({ /** * 页面的初始数据 */ data: { list: [{ img
微信小程序如何实现radio单选框单击打勾和取消

前端使用input 来写radio,小程序使用radio标签也可以使用<radio />单标签 1.自定义radio样式. wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的背景样式 ( 背景边框 ) */ radio .wx-radio-input.wx-radio-input-checked{ width: 32r
微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
微信小程序实现性别单选效果

本文实例为大家分享了微信小程序实现性别单选的具体代码,供大家参考,具体内容如下效果图: 代码: html: <view class="inputbox"> <view class="inptxt">性别</view> <view class="inpbox"> <radio-group bindchange="radioChang
微信小程序实现单选功能

初次接触js弄了好长时间才出来效果,但是还是觉的不做梦完美,希望有更好的方式进行交流:实现效果如下: 虽说这个小功能但是对于我这个新手来说还是有点难:具体代码如下: WXML: <view class="backgrout-bj"> <view class="header"> 最多可增加4个功能入口 </view> <view> <block wx:for="{{model}}"> &l
微信小程序单选框组应用详解

本文实例为大家分享了微信小程序单选框组应用的具体代码,供大家参考,具体内容如下需求概述有一个核选项数组,里面存放着核选项名称.内容.ID.选择状态.选择状态有未选择.符合.不符合三种,默认全部为未选择.通过wx:for将数组渲染到页面,每个核选项都有两个单选按钮,分别是符合和不符合按钮,点击对应按钮会将改变对应那条元素中的选择状态的值,且点击不符合时,会显示出一个文本域,让用户输入不符合原因. 页面最下面有一个提交按钮,点击时会遍历核选项数组,若有选择状态为未选择的项,则无法提交,并提醒.

微信小程序自定义组件实现单选功能

相关推荐

随机推荐