小程序切换标签改变样式

快来打我* 2022-01-15 12:21 234阅读 0赞

**wxml中：**

<view class="zixun"> 
    	<view wx:for="{
       {ziXun}}" data-id="{
       {index}}" wx:key="key" bindtap="xuan" class="zi">
    		<button class="{
       {index==id?'cha':'wen'}}">{
       {item}}</button>
    	</view>
    </view>

**wxss中：**

.zixun {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	margin: 4%;
    }
    
    .zi {
    	border: 1px solid #1F467D; 			/* 使用1rpx会导致边框显示不完整，也可2rpx以上 */
    	border-radius: 15rpx;
    	width: 42%;
    }
    
    .wen {
    	color: #1F467D;
    	background-color: white;
    }
    
    .cha {
    	color: white;
    	background-color: #1F467D;
    }

**js中：**

Page({
    	data: {
    		ziXun: [
    			"免费问诊",
    			"余号查询"
    		],
    		id: 1 									//默认选中第2个，下标为1
    	},
    	xuan:function(e){
    		var id = e.currentTarget.dataset.id; 	//获取自定义id值
    		this.setData({
    			id : id
    		})
    	}
    })

**效果如下：**

![在这里插入图片描述][20190613102919558.png_pic_center]  
![在这里插入图片描述][20190613102937698.png_pic_center]

[20190613102919558.png_pic_center]: /images/20220115/47cadfc61a6340a38d686e52906d22ed.png
[20190613102937698.png_pic_center]: /images/20220115/41c1af976ca04aec9f77362192605f3b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序-bindtap事件点击改变样式

uu 方式一：采用三目运算数据绑定方式改变样式  <view class="middle"> <view

系统管理员/ 2023年07月17日 02:55/ 0 赞/ 18 阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 430 阅读

相关微信小程序 - 原生Tab 标签页切换（轮子）

效果图可根据需求来修改样式或封装成组件。 ![在这里插入图片描述][20200806104753176.gif] wxml <!-- tab框 --

太过爱你忘了你带给我的痛/ 2022年11月24日 12:57/ 0 赞/ 662 阅读

相关详解微信小程序swiper小圆点默认样式改变

在微信小程序中，轮播图上的小圆点默认样式为黑灰色，这在视觉体验上不是很惊艳眼球，有时达不到我们的需求。那么，怎样进行默认样式的改变呢？需要准备的东西：3张图片（swiper

Love The Way You Lie/ 2022年05月29日 06:56/ 0 赞/ 218 阅读

相关微信小程序用js控制类名的切换用于改变不同的样式

有时候，界面文字可能会很多，我们一开始设计界面的时候一定希望让他展示出来几行就行了，如果用户需要查看隐藏的部分，点击展开详情就能把剩余的内容显示出来。方法可能有些不好，但

曾经终败给现在/ 2022年04月10日 08:23/ 0 赞/ 516 阅读

相关小程序标签切换

<view class='centData-cent'> <view wx:for="{ {menudata}}" data-numb="{

梦里梦外;/ 2022年04月04日 10:44/ 0 赞/ 221 阅读

相关小程序切换标签改变样式

wxml中： <view class="zixun"> <view wx:for="{ {ziXun}}" data-id="{

快来打我*/ 2022年01月15日 12:21/ 0 赞/ 235 阅读

相关微信小程序实现样式绑定，点击切换样式

我用的wepy框架开发微信小程序，有双向数据绑定就不需要对dom节点进行操作了。只需要用data-绑定变量就行了。效果图：（在原来的 class上追加样式，默认第一个被选

心已赠人/ 2021年12月09日 07:21/ 0 赞/ 539 阅读

相关小程序——Tab切换

<view class="body"> <view class="nav bc_white"> <view class="{

爱被打了一巴掌/ 2021年09月30日 08:52/ 0 赞/ 374 阅读

相关小程序标签页切换效果

![标题图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

青旅半醒/ 2021年09月17日 04:32/ 0 赞/ 470 阅读