微信小程序默认第一个选中变色

效果图：

这里默认第一个选中点击每个不会改变样式根据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})},

微信小程序默认第一个选中变色相关推荐

微信小程序css鼠标上去变色,微信小程序实现默认第一个选中变色效果
效果图: 这里默认第一个选中点击每个不会改变样式根据index来实现 wxml: 页面class有三目运算 {{item.num}} wxss: _left 蓝色 left 黑色 .box{ wi ...
修改微信小程序默认返回键，使用onUnload
有时候我们又不希望使用自定义返回键,又想修改微信小程序默认返回键的效果可以用onUnload生命周期:如下面代码就可以修改默认返回键效果 onUnload() {if (this.data.from ...
【微信小程序自学第一天】主要内容是text插件以及button按钮插件以及image图像插件
前言作为大一萌新挑战自学微信小程序,在备战蓝桥杯的同时学一点类似服务外包竞赛的内容,本人在上大一之前没有接触过任何编程,还希望各位大佬多多指教! 正文常用的基础内容组件 text 文本组件类似于 ...
原生微信小程序学习第一部分
以前也学过,但是我遗忘得厉害,本来以为是自己老了,后来想想实际上是我不喜欢写笔记,所以我选择在网上写写笔记,帮助他人帮助自己.必须做到凡有学习,必定写笔记. 这个系列如果写下去的话,应该会分成大小两部 ...
【微信小程序丨第一篇】初识微信小程序开发
前言小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 文章目录前言 1.什么是微信小程序 Ⅰ-小程序历史 Ⅱ-小程序的优势 ...
微信小程序录音第一篇（基于微信小程序及百度AI的人员语音识别转文字显示小程序）
基于微信小程序及百度AI的人员语音识别转文字显示小程序基于微信小程序及百度AI的人员语音识别转文字显示小程序主要分3篇 1.微信小程序录音篇(小程序基于wx.startRecord()微信语音录 ...
微信小程序-侧边栏-获取用户选中的值
侧边栏是APP中很常见的一种功能,最近公司的微信小程序项目刚好需要侧边栏这个功能,抱着能自己写就自己写的工作态度,所以决定用基础一些技术来完成此功能. 一.WXML <view class='b ...
微信小程序开发——第一个小程序
这几个月都在忙着准备考研都不怎么研究代码了,前几天老师安排要做毕业设计的开题报告,所以就稍微兼顾着学习了点微信小程序的开发.昨天看了一会官方给的开发文档就是实例少了点,不过有个demo可以抠代码.等考 ...
微信小程序入门第一天
2019独角兽企业重金招聘Python工程师标准>>> 今天开始做微信小程序项目,一整天都在改小程序的样式,和html很相似,但是也有很多不同的地方. 难点一:微信小程序似乎不支 ...

微信小程序默认第一个选中变色

微信小程序默认第一个选中变色相关推荐

最新文章

热门文章

微信小程序 默认第一个选中变色

微信小程序 默认第一个选中变色相关推荐

最新文章

热门文章

微信小程序默认第一个选中变色

微信小程序默认第一个选中变色相关推荐