微信小程序中CLASS类中加判断改变对应的CSS

最新推荐文章于 2024-07-22 09:42:47 发布
最新推荐文章于 2024-07-22 09:42:47 发布
阅读量6.1k 收藏 3
点赞数 2
文章标签： 小程序 html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39174716/article/details/105659086
版权

当前页面里完成，切换显示，不加跳转页

不用display:none;完成

class中的命名和判断

class="my-base {{myBase==false&&myok==true?'my-base1':'my-base'}}"

wx:for wx:for-item

<view class="okdan-content" wx:for="{{okInfo}}" wx:for-item="ok" bind:tap="onConfirm">

okInfo为js文件中data的okInfo
for-item中为自定义名
具体展示和代码如下：
在这里插入图片描述

在这里插入图片描述
wxml:

<view class="container">
    <view class="my">
        <view class="my-hd">
            <view class="my-base {{myBase==false&&myok==true?'my-base1':'my-base'}}"  bindtap="onInfoChange">
                我的功能
            </view>
            <view class="my-ok {{myBase==true&&myok==false?'my-ok1':'my-ok'}}" bindtap="onHwChange">
                我的信息
            </view>
        </view>
        <view class="my-bd" hidden="{{myBase}}">
            <view class="base">
                <view class="base-content">
                    <view class="base-name">
                            <text>学号：</text>
                            <text>姓名：</text>
                            <text>创建时间：</text>
                            <text>余额：</text>
                    </view>
                    <view class="base-data">
                            <text>{{myNum}}</text>
                            <text>{{myName}}</text>
                            <text>{{baseCreate}}</text>
                            <text>{{myMoney}}</text>
                    </view>
                </view>
            </view>
            <view class="base-title">
                列表
            </view>
            <view class="my-list">
                <view class="mylist-content">
                    <image class="mylist-logo" src="../img/heart.png" />
                    <view class="mylist-name">
                            <text class="name-mylistNum">{{mylistNum}}</text>
                            <text class="name-mylistTel">联系方式：</text>
                            <text>创建日期：</text>
                            <text>编号：</text>
                    </view>
                    <view class="mylist-data">
                            <view>data</view>
                            <text>{{mylistTel}}</text>
                            <text>{{mylistDate}}</text>
                            <text>{{mylistmynum}}</text>
                    </view>
                </view>
                <view class="mylist-content">
                    <image class="mylist-logo" src="../img/heart.png" />
                    <view class="mylist-name">
                            <text class="name-mylistNum">{{mylistNum}}</text>
                            <text class="name-mylistTel">联系方式：</text>
                            <text>创建日期：</text>
                            <text>编号：</text>
                    </view>
                    <view class="mylist-data">
                            <view>data</view>
                            <text>{{mylistTel}}</text>
                            <text>{{mylistDate}}</text>
                            <text>{{mylistmynum}}</text>
                    </view>
                    
                </view>
            </view>
        </view>
        <view class="my-ft" hidden="{{myok}}" >
            <view class="container">
            <view class="okdan">
                <view class="okdan-content" wx:for="{{okInfo}}" wx:for-item="ok" bind:tap="onConfirm">
                    <image src="../img/heart.png" class="okdan-logo" />
                    <view class="okdan-infor">
                    <text class="okdan-num">{{ok.okNum}}</text>
                    <text class="okdan-type">编号：{{ok.okContract}}</text>
                    <text class="okdan-start">日期：{{ok.okDate}}</text>
                    </view>
                    <text class="okdan-state {{ok.okState=='已确认'?'okdan-stateConfirm':'okdan-state'}}">{{ok.okdanState}}</text>
                    <image src="../img/heart.png" class="go-logo"/>
                </view>
            </view>
            </view>
        </view>
    </view>
</view>

wxss:

page{
    background-color: #f3f3f3;
    height: 100%;
    width: 100%;
}
.my{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
}
.my-hd{
    width: 100%;
    height: 70rpx;
    display: flex;
    flex-direction: row;
}
.my-base{
    width: 50%;
    display: flex;
    align-items: center;
    height: 70rpx;
    border: 2rpx #e2e2e2 solid;
    justify-content: center;
    background-color: white;
    font-size: small;
    color: black;
}
.my-base1{
    width: 50%;
    display: flex;
    align-items: center;
    height: 70rpx;
    border: 2rpx #e2e2e2 solid;
    justify-content: center;
    background-color: white;
    font-size: small;
    color: blue;
}
.my-ok{
    width: 50%;
    display: flex;
    align-items: center;
    height: 70rpx;
    border: 2rpx #e2e2e2 solid;
    justify-content: center;
    background-color: white;
    font-size: small;
}
.my-ok1{
    width: 50%;
    display: flex;
    align-items: center;
    height: 70rpx;
    border: 2rpx #e2e2e2 solid;
    justify-content: center;
    background-color: white;
    font-size: small;
    color: blue;
}
/*my-base*/
.base{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    left: 3%;
}
.base-content{
    width: 94%;
    height: 320rpx;
    margin-top: 3%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: 2rpx #d3d3d3 solid;
    border-radius: 8rpx;
}
.base-content text{height:48rpx;}
.base-name{
    margin-top: 12rpx;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: flex-start;
    color: #666;
    font-size: small;
}
.base-data{
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: flex-start;
    color: #333;
    font-size: small;
}
.base-title{
    margin-top: 16rpx;
    margin-left:6%;
    font-size: small;
    font-weight: bold;

}
.mylist-logo{
    width: 58rpx;
    height: 58rpx;
    margin-left: 12rpx;
}
.my-list{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    left: 3%;
    margin-top: 16rpx;
}
.mylist-content{
    width: 94%;
    height: 160rpx;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: 1rpx #d3d3d3 solid;
    
}
.mylist-name{
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: flex-start;
    color: #333;
    font-size: small;
}
.mylist-data{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: stretch;
    color: #333;
    font-size: small;
}
.mylist-data view{
    visibility:hidden;
}

.name-mylistNum{
    font-weight: bold;
    color: black;
}
.name-mylistTel{
    padding-top: 7.5rpx;
}
/*my-base end*/
/*my-okdan*/

.okdan{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.okdan-content{
    width: 92%;
    height: 180rpx;
    background-color: white;
    display: flex;
    align-items: center;
    border-bottom: solid #f5f5f5 3rpx;
    border-radius: 8rpx;
    border: 1rpx solid #d7d7d7;
    margin-top: 15rpx;
}
.okdan-logo{
    position: absolute;  
    width: 60rpx;
    height: 60rpx;
    left: 35rpx;
}
.go-logo{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: 35rpx;
}
.okdan-infor{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    left: 105rpx;
}
.okdan-num{
    color: #333;
    font-size: small;
    font-weight: 700;
}
.okdan-type{
    padding-top: 12rpx;
    color: #666;
    font-size: small;
}
.okdan-start,.okdan-end{
    color: #666;
    font-size: small;
}
.okdan-state{
    color: #175efd;
    position: absolute;
    font-size: small;
    right: 100rpx;
    display: flex;
    align-items: center;
}
.okdan-stateConfirm{
    color: gray;
    position: absolute;
    font-size: small;
    right: 100rpx;
    display: flex;
    align-items: center;
}
/*my-okdan end*/

js:

Page({
    data: {
        myBase:false,
        myok:true,
        myNum:"1",
        myName:"Wang",
        baseCreate:"2020/01/09 15:20:23",
        myMoney:"100000元",

        mylistNum:"Wu",
        mylistTel:"111111111",
        mylistDate:"2020-02-24",
        mylistmynum:"0",
        mylistState:"确认",

        okInfo:[
            {
                okid:1,
                okState: "待确认",
                okNum:"WangT",
                okContract:"89757",
                okDate:"2020年2月16日",
            },
            {
                okid:2,
                okState: "已确认",
                okNum:"WuX",
                okContract:"89757",
                okDate:"2020年2月15日",
            },
            {
                okid:3,
                okState: "已确认",
                okNum:"DD",
                okContract:"89757",
                okDate:"2020年2月15日",
            },
        ]
    },
    onInfoChange(){
        this.setData({
            myBase:false,
            myok:true
        })
    },
    onHwChange(){
        this.setData({
            myBase:true,
            myok:false
        })
    },
    onConfirm:function(){
        wx.navigateTo({
            url: '.././index',
        });
    }
})

源文件：https://github.com/w490672649/wxpageChange1.git

WangTYu0829
关注
前端面试 class加数据类型判断加原型和原型链
weixin_45391167的博客
03-16 321
Class & 继承 & 原型 & 原型链 Class ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 类的声明 比如 声明一个类，并声明一个该类的实例 class Student { //constructor 构造函数 construc
微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
weixin_39940154的博客
12-19 1219
小程序实现多button单选/多选红色为选中状态单选多选①wxss/* pages/button-select/button-select.wxss */.button_container{display: flex;flex-direction: row;justify-content: space-around}/* 按钮未选中 */.normal_button{background: gre...
vue、uniapp、微信小程序在class上添加判断的语法
分享互联网的有趣知识~
07-20 5131
vue、uniapp、微信小程序在class上添加判断的语法
css class 多种规则判断样式
最新发布
Little___Turtle的博客
07-22 359
商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断。
class h5 点击后样式变化_微信小程序点击view动态添加样式实现原理简介
weixin_39888180的博客
01-17 416
这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下基本逻辑：1.给每个view自定义dataIndex属性，从0开始2.自定义一个名为selected的class，作为被选中后的样式3.在wx.js中给viewId属性赋为0，用于默认显示。4.给每个view添加一个点击事件select，在点...
微信小程序 通过响应式数据控制元素class属性
weixin_45966674的博客
09-04 1084
这里 我们判断 如果当前item中的userId如果和我们响应式数据中的userId相同 则给与isThisUser。我想大家照这个和我最初的目的一样 希望有和vue中v-bind:class一样方便的指令。也能实现效果 但其实 个人总觉得写法并不是那么好看。这里 我们只能采用 三元运算符的形式。否则 赋值为空字符串。
CSS—— css 动态绑定 class 多个条件判断
qq_43201350的博客
01-04 1264
CSS—— css 动态绑定 class 多个条件判断
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
在微信小程序中，开发者可以利用`<video>`组件来实现视频播放功能，并且可以根据需求进行高度定制。在本文中，我们将深入探讨如何在微信小程序中实现自定义播放按钮、封面图以及在视频封面上添加文案。 首先，让...
微信小程序知识总结
zheboshiqifei的博客
03-20 1311
在对一个程序或者界面编译之前，需要有充足的知识储备，同时需要一个良好的编程软件，因此微信团队开发了一个适用于大众及专业人员的软件：稳定版 Stable Build | 微信开放文档 进入软件界面之后，首先会看到app.js、app.json,app.wxss、project.config.json、sitemap.json，他们的功能为 sitemap.json配置文件 project.config.json配置文件 wxml类似于html中的html 书写页面结构 wxss类似于html中的
微信小程序样式 WXSS
qq_44154912的博客
01-12 1407
微信小程序样式 WXSS样式基础尺寸单位样式导入内联样式选择器less语法 样式基础 类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示。 WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 / 样式导入 尺寸单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。 不管屏幕的实际宽度有多大 , 规定他的屏幕宽为750rpx。 rpx计算步骤
【微信小程序】竖直分割线
weixin_37629807的博客
03-13 4354
文章目录效果做法 效果 做法 在网上搜到好多方法 有设置CSS； 有专门写一个html,再引入； 有点麻烦，我的方法是 加一张图片，设置长宽 代码如下： //wxml <image src="/icons/line_icon.jpg" class="img_line"></image> //wxss .img_line{ height:39rpx; wi...
微信小程序点击移除添加class（点击改变背景颜色和字体颜色）
热门推荐
qssn的博客
07-25 2万+
微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。 点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 <!--页面--> <view class="info_choose "> <view class="catalog_name
微信小程序开发教程：三元运算符动态添加类属性，根据用户的选择改变CSS样式
qq_25501981的博客
12-02 1252
若要在显示"▲收起内容▲"时修改底色，可以通过动态添加一个CSS类来控制样式。以下是一个示例代码，展示了如何在WXML中使用条件渲染来动态添加类，并在WXSS中定义这个类的样式。的值发生变化时，视图的底色也会相应地发生变化。这样，当点击事件触发，确保在你的WXSS文件中定义了。元素上，从而改变其底色。
小程序动态改变样式class
v_loading的博客
06-07 975
#问题 小程序中动态改变样式class #解决 直接在{{}}里做判断，{{cindex==index? ‘sborder’:’’}} <view class="sitem {{cindex==index? 'sborder':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="changeIndex"> {{item.name}} </view> ...
小程序三元参数判断
qq_38026437的博客
09-26 3086
记录一下新手容易弄混的 多次三元比较 其实就是 if else 的简写，true 就是 ←     false 就是 → 例子： css .cr{ color: red; } .cb{ color: blue; } .cy{ color: yellow; } html: &lt;view class='{{ c1 ? "cr":"cb"}}'&gt; c1有值 &lt...
小程序多个条件判断
caoyan0829的博客
04-10 1万+
小程序的多个条件判断：上代码 &lt;view wx:for="{{myattacheArr}}" wx:key="{{id}}" wx:for-item="AttacheItem" class='call-attache' wx:if="{{AttacheItem.personnelType[0]==0 &amp;&amp; RoleArr[AttacheItem.roleType...
微信小程序——template模板的使用
cccrush的博客
10-12 872
模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。当项目需要多次使用同一个布局和样式的时候，就可以考虑使用template（模板）来减少冗余代码。 如何定义以及使用模板   wxml模块： 新建template文件夹，新建wxml。 wxml文件由template标签包裹，并设置template标签名字属性方便调用。 使用时在对应wxml文件...
小程序中class属性值根据三元表达式判断得到
baifengqing的博客
08-14 1万+
目的:根据data中you的数据来判断，用什么颜色.you为true值，class=nihao；反之class=nihao12 js中代码(data数据) Page({ /** * 页面的初始数据 */ data: { you:0 } }) wxml中 &lt;view class="{{you?'nihao':'nihao12'}}"&gt; ...
Class三目运算/动态添加Class/判断添加Class
Kimser
06-16 5774
:class ="{'iconicon-guzhangzhenduan':faultDetail.faultMode==='0','iconicon-yujing':faultDetail.faultMode==='1' }" 冒号前为类名后为条件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值