微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果

效果图：

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

wxml：

页面class有三目运算

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

})

总结

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

微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果相关推荐

微信小程序默认第一个选中变色
效果图: 这里默认第一个选中点击每个不会改变样式根据index来实现 wxml: 页面class有三目运算 <view class='box'><view class='box- ...
css鼠标箭头如何变成小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) οnmοuseοver="th ...
微信小程序- css相比,wxss区别？小程序关联微信公众号如何确定用户的唯一性？微信小程序中的用户ID(openid和unionid)
1 与css相比, wxss区别? 1) 响应式长度 rpx 2) 样式导入 3) 小程序不支持通配符* *{ width:100rpx; height:100rpx; } 2 小程序关联微信公众号如 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序css 华文琥珀_琥珀项目：较小的，面向生产力的Java语言功能
微信小程序css 华文琥珀 Brian Goetz最近的消息欢迎来到琥珀! 介绍Project Amber ( OpenJDK的一部分, 最初于1月提出 ). Goetz通过介绍"欢迎使用A ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
微信小程序css篇----定位（position）
昨天2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇, ...
微信小程序打开红包的css_微信小程序 css使用技巧总结
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-wi ...
微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...

微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果

微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果相关推荐

最新文章

热门文章