微信小程序自定义单项选择器样式

2024-09-30 20:03:16

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

效果：

wxml：

<view bindchange="radioChange">

 <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'border-bottom:0':''}}">
  <text style='color:rgb(96,96,96)'>{{item.value}}</text>
  <view wx:if="{{item.selected}}" class='item'>
   <view style='width:20rpx;height:20rpx;background-color:rgb(144,144,144);border-radius:100%;'></view>
  </view>
  <view wx:else class='item'></view>
 </view>

</view>

wcss：

.list_item{

 display: flex;

 justify-content: space-between;
 align-items: center;
 margin:0 25rpx;
 width:700rpx;
 font-size: 30rpx;
 color: rgb(79,79,79);
 padding: 28rpx 0;
 border-bottom:1px solid rgb(209,209,209);

}

.item{

 width: 28rpx;
 height: 28rpx;
 border: 2px solid rgb(144,144,144);
 border-radius: 100%;
 display: flex;
 align-items: center;
 justify-content: center;

}

js：

Page({

 data: {

  radioValues: [

   { 'value': '未付款订单', 'selected': false },
   { 'value': '进行中的订单', 'selected': false },
   { 'value': '完成了的订单', 'selected': false },
   { 'value': '所有订单', 'selected': true },

  ]

 },

 onLoad: function (options) {
 },

 radioChange:function(e){
  var index = e.currentTarget.dataset.index;
  var arr = this.data.radioValues;
   for (var v in arr){
   if (v == index){

    arr[v].selected = true;

   }else{

    arr[v].selected = false;

   }

  }

  this.setData({
   radioValues:arr

  })

 }

})

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

微信小程序省市区选择器实例详解(附源码下载)

微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu
微信小程序多列选择器range-key使用详解

本文实例为大家分享了微信小程序多列选择器的具体代码,供大家参考,具体内容如下 <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}"
微信小程序之picker日期和时间选择器

下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te
微信小程序实现自定义picker选择器弹窗内容

微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo
微信小程序三级联动选择器使用方法

本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas
详解微信小程序开发之城市选择器城市切换

移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js'); Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, cityList: [], isShowLetter: false, scrollTop: 0, city: "
微信小程序选择器（时间，日期，地区）实例详解

微信小程序选择器(时间,日期,地区) 微信小程序开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti
微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图源码传送门 picker和picker-view组件在正式介绍实
微信小程序switch开关选择器使用详解

本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b
微信小程序日期时间选择器使用方法

本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

微信小程序自定义单项选择器样式

相关推荐

随机推荐