微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名

目的，在微信小程序的swiper中达到除了active的哪一项外的其他项都有一个半透明的白色浮层。

效果图如下：

功能实现：

我们使用三元表达式即可实现动态设置标签中的class属性如下：

<view class='{{index != swiperIndex ? "swiper-small" : ""}}'>

上面这段代码里，有两个变量，当index的值与swiperIndex的值不想等的时候，此标签的class为swiper-small否者为""空。

该Demo的完整代码如下：

<!-- wxml -->
<swiper indicator-dots="{{ false }}" display-multiple-items="1" circular="{{ true }}" next-margin="50rpx" previous-margin="50rpx" class="swiper" bindchange="swiperChange"><block wx:for="{{imgUrls}}"><swiper-item style="position: absolute; width: 100%; height: 400rpx; transform: translate(0%, 0px) translateZ(0px);"><view class='{{index != swiperIndex ? "swiper-small" : ""}}'><image src="{{item}}" class="slide-image" width="355" height="150"/><view class="swiper-top" wx:if="{{ index != swiperIndex }}"></view></view></swiper-item></block>
</swiper>

/* wxss */
.slide-image {position: absolute;top: 0;width: 100%;height: 400rpx;
}
.swiper-small {position: absolute;width: 100%;height: 80%;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);opacity: 0.8;overflow: hidden;
}
.swiper-top {position: absolute;top: 0;width: 100%;height: 400rpx;background-color: rgba(255, 255, 255, 0.5);
}
.swiper {width: 100%;height: 400rpx;
}

/* js */
Page({data: {imgUrls: ['https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640','https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640','https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'],swiperIndex: 0,},swiperChange: function (e) {console.log('e', e.detail.current)this.setData({swiperIndex: e.detail.current})},
})

每个功能的需求都不一样，请根据实际需求进行修改。

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名相关推荐

微信小程序中如何添加和删除class类名
在微信小程序开发中,不能像普通web开发一样通过JS操作DOM,因此不能通过JSDOM操作直接为一个节点添加一个类.我们可以通过微信小程序数据绑定,再加上微信小程序中支持的三元判断表达式,去更改标签类 ...
微信小程序中的添加收获地址的流程
1.添加收获地址的解析 1.首先我们要给添加收获地址设置点击事件2.然后在通过微信官方文档给我们提供的一个方法来进行添加本地存储3.判断本地里面是否有存在的内容,如果有的话显示内容,如果没有那么就显示 ...
微信小程序点击添加/删除表单
wxml : <view class="container"><block wx:for="{{lists}}" wx:key="{ ...
在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目解压后打开,把ec-canvas文件夹复制到项目pages同 ...
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队，完整免费，配置即用
文章目录 1 概述 2 用户使用 3 平台首页 4 校园社交页 5 物品发布页 6 动态发表页 7 我的 8 物品详情页 9 动态详情页 10 搜索页特别说明 1 概述 1.1 关于本手册为了使您 ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名

目的，在微信小程序的swiper中达到除了active的哪一项外的其他项都有一个半透明的白色浮层。

效果图如下：

功能实现：

我们使用三元表达式即可实现动态设置标签中的class属性如下：

上面这段代码里，有两个变量，当index的值与swiperIndex的值不想等的时候，此标签的class为swiper-small否者为""空。

该Demo的完整代码如下：

每个功能的需求都不一样，请根据实际需求进行修改。

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名相关推荐

最新文章

热门文章

微信小程序中动态添加删除class类名 使用三元表达式动态设置标签的class名

目的，在微信小程序的swiper中达到除了active的哪一项外的其他项都有一个半透明的白色浮层。

效果图 如下：

功能实现：

我们使用三元表达式即可实现动态设置标签中的class属性 如下：

上面这段代码里，有两个变量，当index的值与swiperIndex的值不想等的时候，此标签的class为swiper-small否者为""空。

该Demo的完整代码如下：

每个功能的需求都不一样，请根据实际需求进行修改。

微信小程序中动态添加删除class类名 使用三元表达式动态设置标签的class名相关推荐

最新文章

热门文章

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名

效果图如下：

我们使用三元表达式即可实现动态设置标签中的class属性如下：

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名相关推荐