微信小程序实现默认第一个选中变色效果


Posted in Javascript onJuly 17, 2018

效果图:

微信小程序实现默认第一个选中变色效果

这里默认第一个选中 点击每个不会改变样式 根据index来实现

wxml:

页面class有三目运算

<view class='box'>
 <view class='box-container' wx:for="{{list}}" wx:key="list">
  <view class="{{index==idx?'_left':'left'}}" bindtap='goIndex' data-index="{{index}}">{{item.num}}</view>
 </view>
</view>

wxss:

_left 蓝色 left 黑色

.box{
 width: 100%;
 height: auto;
 border-top: 1px solid #efefef;
}
.box-container{
 width:90;
 display: flex;
 height: 100rpx;
 align-items: center;
 border-bottom: 1px solid #efefef;
}
.left{
 margin-left: 40rpx;
 font-size: 26rpx;
}
._left{
 margin-left: 40rpx;
 font-size: 26rpx;
 color: #14a1fd;
}

js: 定义一个idx:0 默认为0 拿到每个index

/**
  * 页面的初始数据
  */
 data: {
  list:[
   {'num':'我是第一个'},
   { 'num': '我是第二个' },
   { 'num': '我是第三个' },
   { 'num': '我是第四个' },
   { 'num': '我是第五个' },
   {'num':'我是第六个'},
   { 'num': '我是第七个' },
   { 'num': '我是第八个' },
   { 'num': '我是第九个' },
   { 'num': '我是第十个' }  
  ],
  idx : 0
 },
 goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每个index',index)
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },

想要实现点击变色的话

如图:

微信小程序实现默认第一个选中变色效果

点击第二个 第二个变蓝色 其余变黑色

点击第三个 第三个变蓝色 其余变黑色... 只需要给idx赋值即可

goIndex (e) {
  let index = e.currentTarget.dataset.index; 
  // console.log('每个index',index)
  this.setData({
   idx: index
  })
 },

总结

以上所述是小编给大家介绍的微信小程序实现默认第一个选中变色效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 #Javascript
微信小程序实现循环动画效果
Jul 16 #Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 #Javascript
Vue实现自定义下拉菜单功能
Jul 16 #Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript实现手机震动API代码
2015/08/05 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
javascript回调函数详解
2018/02/06 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
深入讲解Java编程中类的生命周期
2016/02/05 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python实现购物车程序
2018/04/16 Python
pytorch 模型可视化的例子
2019/08/17 Python
flask项目集成swagger的方法
2020/12/09 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
高中自我鉴定
2013/12/20 职场文书
个人公开承诺书
2014/03/28 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Java 在生活中的 10 大应用
2021/11/02 Java/Android