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


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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Vue的Options用法说明
Aug 14 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
js数组的基本使用总结
Jan 18 Javascript
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中time()和mktime()方法的区别
2013/09/28 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python变量和字符串详解
2017/04/29 Python
Python中str.join()简单用法示例
2018/03/20 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python socket 聊天室实例代码详解
2019/11/14 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python 的topk算法实例
2020/04/02 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python