微信小程序切换选中状态
实现的主要思路是根据每一项的index值,动态改变idx值,当index==idx值的时候,添加点击选中样式的类名。
wxml:
<scroll-view scroll-x="true">
<view class="scroll-x">
<view wx:for-items="{{scrolls}}" wx:key="name">
<view class="view {{index==idx?'_left':'left'}}" data-index="{{index}}" bindtap="goIndex">{{item}}</view>
</view>
</view>
</scroll-view>
接下来是css:
.scroll-x {
display: flex;
flex-direction: row;
}
.view {
width: 200px;
text-align: center;
}
.active,._left{
color: #fff;
background-color: #000;
border-bottom:1px solid red;
}
最后是js
data: {
scrolls: ['待审批订单','已审批订单'],
idx: 0
}, goIndex (e) {
this.setData({
idx:e.currentTarget.dataset.index,
})
},
微信小程序切换选中状态的更多相关文章
- 关于微信小程序切换获取不到元素的问题
1.由于公司要实现微信小程序的自动化,所以开始学习python + appium 实现微信小程序自动化.在学习过程中遇到在切换webview后获取不到页面元素的问题,导致无法继续.今天在网上看到一篇关 ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)
微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...
- 微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
- 微信小程序 --- 获取网络状态
获取网络状态:wx.getNetworkType btnclick:function(){ wx.getNetworkType({ success:function(res){ console.log ...
- 微信小程序 - 更改button状态
wxml <button class='yes-orders' style='{{status_css}}' bindtap='clickExpress'> {{statusOrders} ...
- 微信小程序 div选中效果
._left{ position: relative; margin-top: 40rpx; width: 40%; height: 350rpx; border-radius: 12rpx; tex ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- Cookie学习总结
Cookie简述 1. 概念 一种客户端会话技术,可以将一些少量的数据保存在客户端. 2. 快速使用 步骤 创建cookie对象,并设定数据 new Cookie(String name, Strin ...
- 二本,拿腾讯,阿里 offer 了
我的春招 Hello,首先自我介绍一下,我是一所普普通通的二本院校的大三学生,坐标江苏. 今年三月份拿到了腾讯实习的offer,人生中第一次面试是腾讯,部门是 TEG 的云架构,并且顺利签约,说实话内 ...
- jvm源码解读--18 Java的start()方法解读 以及 wait 和notify流程图
drawwed by 张艳涛 and get info from openjdk8 还有一个图
- synchronized 加锁 this 和 class 的区别!
synchronized 是 Java 语言中处理并发问题的一种常用手段,它也被我们亲切的称之为"Java 内置锁",由此可见其地位之高.然而 synchronized 却有着多种 ...
- SQL语句(四)联表查询
目录 一.关联查询的分类 按年代分 按功能分 二.sql92语法的连接 语法 1. 简单应用 2. 为表起别名 3. 加入筛选 4. 加入分组 5. 三表连接 6. 非等值连接 7. 自连接 三.sq ...
- XCTF-ics-05(文件包含+preg_replace函数/e修正符下的代码执行漏洞)
记一道preg_replace函数/e模式下的代码执行漏洞利用的题. 只有设备维护中心页面可以进入,页面没有什么可点击的,查看源代码,发现这里有个参数. 拼接到url,页面显示index,拼接/etc ...
- 数据库之 MySQL
MySQL简单入门 数据库这个概念想必大家都听说过,我在这里也简单介绍一下. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的 API 用于创建,访 ...
- 遇到的JDBC的一些简单错误
遇到的JDBC的一些简单错误 复习java swing的使用的时候,把东西都写好了,但是在进行数据库连接的时候,出现了错误 java.lang.ClassNotFoundException: com. ...
- 基于kail的docker下安装sqli-labs
后面的关卡涉及到转码问题,比如空格,在Windows中会受到限制,比如24关的文件重命名问题,所以在这记录下在docker下安装sqli-labs,在linux下运行就不会受到限制. 参考链接:htt ...
- zlib开发笔记(三):zlib库介绍、在ubuntu上进行arm平台交叉编译
前言 方便做嵌入式arm的交叉移植zlib库. Zlib库 zlib被设计为一个免费的,通用的,法律上不受限制的-即不受任何专利保护的无损数据压缩库,几乎可以在任何计算机硬件和操作系统上使 ...