微信小程序实现单选选项卡切换效果

2024-10-29 12:44:06

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法，供大家参考，具体内容如下

效果如图：

wxml:

<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem">
  <view class="choosebtn {{idx==currentidx&&choose==true?'choosedbtn':'choosenobtn'}}"></view>
  <text>{{idx==currentidx&&choose==true?text:textTwo}}</text>
</view>

wxss:

.item {
 width: 100%;
 height: 120rpx;
 background: #f5f5f5;
 display: flex;
 flex-direction: row;
 align-items: center;
 margin-bottom: 20rpx;
}

.item .choosebtn {
 width: 60rpx;
 height: 60rpx;
 border-radius: 50%;
 margin-left: 40rpx;
}

.item .choosenobtn {
 background: #c0c0c0;
}

.item .choosedbtn {
 background: #87ceeb;
}

.item text {
 margin-left: 30rpx;
}

js:

Page({
 data: {
  // 让所有的选项都成为未选中状态
  choose: false,
  // 用来循环展示的数据
  data: [1, 2, 3],
  text: '选中了',
  textTwo: '没选中'
 },
 // 点击选项卡时的js
 chooseItem: function (e) {
  //记录上次点击的对象的序号
  var oldidx = this.data.currentidx;
  //记录当前点击的对象的序号
  var currentidx = e.currentTarget.dataset.idx;
  if (oldidx == currentidx) {
   var choose = this.data.choose;
   this.setData({
    currentidx: currentidx,
    choose: !choose
   })
  } else {
   this.setData({
    currentidx: currentidx,
    choose: true
   });
  }
 }
})

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

微信小程序实现左右列表联动

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下效果图: 直接上代码: wxml界面: <view class='header'> <text class='headerClass'>分类</text> <text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'&g
微信小程序实现banner图轮播效果

本文实例为大家分享了微信小程序实现banner图轮播的具体代码,供大家参考,具体内容如下效果图: indicator-active-color="#007aff"//修改选中图片圆点的颜色 js: const app = getApp() Page({ data: { //-----------模拟banner图----------- imgUrls: [ '/image/1545118381903.jpg', '/image/1545118566631.jpg' ], circul
node.js微信小程序配置消息推送的实现

在开发微信小程序时,有一个消息推送,它的解释是这样的. 消息推送具体的内容是下面的这个网址 https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html,他介绍的也还可以,就是我这里换成了node代码. 消息推送启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 在微信小程序的首页开发里面,开发设置中,微信的官网中,
一秒学会微信小程序制作table表格

大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="t
微信小程序实现简易table表格

本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</v
解决微信小程序中转换时间格式IOS不兼容的问题

昨天弄一个微信倒计时;遇到了这个为题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,来是因为IOS系统不支持2018-08-30这样的格式的时间导致的 let olddata ='2018-08-30 11:00:00'; let mydata=new Date(olddata); console.log(mydata); let newdata=mydata.getTime(); 这样的代码安卓手机开发手机和微信小程序编辑器测试都没有问题,唯独IOS获取的日期为不显示,原来I
微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object,用于自定义分享内容示例代码: Page({ onShareAppMessag
微信小程序时间标签和时间范围的联动效果

本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的.将start.end时间放在data里,radio发生改变时,改变data中的时间.当picker中的值发生改变时,如果时间范围已经超出了
微信小程序实现工作时间段选择

本文实例为大家分享了微信小程序工作时间段选择的具体代码,供大家参考,具体内容如下 1. 效果图如上,需完成时间段的选择以及下面的工作日选择保存按钮为formSubmit提交后台 2.思路: ①时段用picker跟input 如果没有占位字符则不需要input ②工作日选择用checkbox 多选的样式用label 将checkbox隐藏 ③label的选择后的样式跟取消的样式,这里无需判断checked 当然也可以判断checked 我这里的方法是,先建一个放星期一到星期天
微信小程序websocket聊天室的实现示例代码

背景最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30

微信小程序实现单选选项卡切换效果

相关推荐

随机推荐