实现的主要思路是根据每一项的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. 关于微信小程序切换获取不到元素的问题

    1.由于公司要实现微信小程序的自动化,所以开始学习python + appium 实现微信小程序自动化.在学习过程中遇到在切换webview后获取不到页面元素的问题,导致无法继续.今天在网上看到一篇关 ...

  2. 微信小程序CheckBox选中事件

    1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...

  3. 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

    微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...

  4. 微信小程序button选中改样式-实现单选/多选

    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...

  5. 微信小程序 --- 获取网络状态

    获取网络状态:wx.getNetworkType btnclick:function(){ wx.getNetworkType({ success:function(res){ console.log ...

  6. 微信小程序 - 更改button状态

    wxml <button class='yes-orders' style='{{status_css}}' bindtap='clickExpress'> {{statusOrders} ...

  7. 微信小程序 div选中效果

    ._left{ position: relative; margin-top: 40rpx; width: 40%; height: 350rpx; border-radius: 12rpx; tex ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序_(校园视)开发视频的展示页_下

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

随机推荐

  1. Cookie学习总结

    Cookie简述 1. 概念 一种客户端会话技术,可以将一些少量的数据保存在客户端. 2. 快速使用 步骤 创建cookie对象,并设定数据 new Cookie(String name, Strin ...

  2. 二本,拿腾讯,阿里 offer 了

    我的春招 Hello,首先自我介绍一下,我是一所普普通通的二本院校的大三学生,坐标江苏. 今年三月份拿到了腾讯实习的offer,人生中第一次面试是腾讯,部门是 TEG 的云架构,并且顺利签约,说实话内 ...

  3. jvm源码解读--18 Java的start()方法解读 以及 wait 和notify流程图

    drawwed by 张艳涛 and get info from openjdk8 还有一个图

  4. synchronized 加锁 this 和 class 的区别!

    synchronized 是 Java 语言中处理并发问题的一种常用手段,它也被我们亲切的称之为"Java 内置锁",由此可见其地位之高.然而 synchronized 却有着多种 ...

  5. SQL语句(四)联表查询

    目录 一.关联查询的分类 按年代分 按功能分 二.sql92语法的连接 语法 1. 简单应用 2. 为表起别名 3. 加入筛选 4. 加入分组 5. 三表连接 6. 非等值连接 7. 自连接 三.sq ...

  6. XCTF-ics-05(文件包含+preg_replace函数/e修正符下的代码执行漏洞)

    记一道preg_replace函数/e模式下的代码执行漏洞利用的题. 只有设备维护中心页面可以进入,页面没有什么可点击的,查看源代码,发现这里有个参数. 拼接到url,页面显示index,拼接/etc ...

  7. 数据库之 MySQL

    MySQL简单入门 数据库这个概念想必大家都听说过,我在这里也简单介绍一下. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的 API 用于创建,访 ...

  8. 遇到的JDBC的一些简单错误

    遇到的JDBC的一些简单错误 复习java swing的使用的时候,把东西都写好了,但是在进行数据库连接的时候,出现了错误 java.lang.ClassNotFoundException: com. ...

  9. 基于kail的docker下安装sqli-labs

    后面的关卡涉及到转码问题,比如空格,在Windows中会受到限制,比如24关的文件重命名问题,所以在这记录下在docker下安装sqli-labs,在linux下运行就不会受到限制. 参考链接:htt ...

  10. zlib开发笔记(三):zlib库介绍、在ubuntu上进行arm平台交叉编译

    前言   方便做嵌入式arm的交叉移植zlib库.   Zlib库   zlib被设计为一个免费的,通用的,法律上不受限制的-即不受任何专利保护的无损数据压缩库,几乎可以在任何计算机硬件和操作系统上使 ...