wepy 小程序中给page标签动态添加类名

最新推荐文章于 2024-02-27 18:06:28 发布
最新推荐文章于 2024-02-27 18:06:28 发布
阅读量2.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： wepy 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42340514/article/details/86030054
本文分享了前端新手如何间接修改Page的实用方法，通过利用Page下的View组件达到目的，适合初学者参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端萌新，如有不当之处请多赐教哦!

这个问题在网上看了好像没有直接修改page的方法，但是可以借助page下面的view，亲测有效。

在这里插入图片描述

微信小程序中如何添加和删除class类名
weixin_43509051的博客
08-28 3765
在微信小程序开发中，不能像普通web开发一样通过JS操作DOM，因此不能通过JSDOM操作直接为一个节点添加一个类。我们可以通过微信小程序数据绑定，再加上微信小程序中支持的三元判断表达式，去更改标签类名。 具体实现：以一个tab栏为例，在逻辑层定义一个数据activeClass，值为添加active类的索引。给每个tab中的view块绑定一个tabHandler事件，通过id属性向逻辑层传递点击的...
小程序全局组件使用（自动插入节点）
qq_43585229的博客
07-11 2092
小程序全局组件的实现方法
小程序动态添加class样式
Coder_KellySha的博客
09-27 1634
<i-tabs current="{{ currentTab }}" scroll bindchange="handleChangeScroll"> <i-tab i-class="tab-item {{item.key=='xxx'?'tab-lg-width':''}}" wx:for="{{tabList}}" wx:key="index" ...
微信小程序page设定css,微信小程序——启动，渲染与Page
weixin_29196891的博客
08-03 1229
四种文件格式:.js js操作至少要写Page({})，用于注册一个页面.json 一些基础设定至少要一个{}均需使用双引号, 且不能有注释，不能有多余的逗号project.config.json 用于IDE的个性化配置.wxml 代替html推荐采用弹性盒模型bind(冒泡阶段)和catch(捕获阶段)都能绑定事件.wxss 代替css新单位:rpx 规定屏幕为750rpx当前支持的选...
Wordpress开发 - 两种方式给你的文章标签加一个类名（class）
hanzi552200的博客
08-04 582
写在前面 仿站的进度终于到了index.php页面啦~现在到修改tags了。默认使用获取标签的函数的a标签是没有样式的，但是如果我们想要给他加一个样式呢？ 我就在谷歌找啊找啊，终于在stackoverflow上学到两种方式来增加一个类名！ 教程开始 其实很简单，只要在你的index.php页面使用<?php the_tags('','',''); ?>这个函数，然后在functions.php页面增加以下代码即可。 注意哦，这里是('','','')的意思是，去除“标签：...
小程序 记录遇到的坑 用js控制添加class名改变样式
后生丶的博客
12-25 3590
用三目运算符时  class属性  要用双引号class=""；使用单引号‘’会报错  因为三目运算符里面有单引号  
基于wepy框架的page.wpy文件
yanner_的博客
07-13 288
&amp;lt;script&amp;gt; import wepy from 'wepy'; import Counter from '../components/counter'; export default class Page extends wepy.page { customData = {} //自定义数据 customFunction () {} //自定义方法 o...
微信小程序点击添加class类名，再点击删除类名
weixin_46504346的博客
06-16 1034
在上面的代码中，我们通过绑定一个点击事件 bindtap 来调用 changeColor 方法，方法中使用 setData 来改变 data 中的 isRed 变量来实现添加或删除 red 类名。可以使用事件绑定和操作元素的方法来实现点击添加和删除 class 类名。注意在 HTML 中，我们使用了 {{}} 模板语法来动态控制是否显示 red 类名。
小程序基础——全局配置
Wen先森的博客
08-04 719
pages属性：用于指定小程序由哪些页面组成，每一项对应一个页面的路径（含文件名）信息。文件名不需要后缀，小程序框架会自动找寻对应位置的.json、.js、.wxml、.wxss文件进行处理。在创建一个页面时，我们可以选择在pages文件夹下新建一文件夹，然后右键选择新建Page，输入文件名，就会自动生成.json、.js、.wxml、.wxss文件四个文件。小程序中新增/减少页面，都需要对 pages 数组进行修改。也可以直接在app.json文件的pages里，直接写入路径，也可自动生成页面文件。...
【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件
记录
04-04 2363
如果想修改.page的样式，再用普通的动态class判断改变就可以了。在wxml最外层套一个自己定义的page的class。直接使用下面的写法，是静态的。
微信小程序page组成部分分析与创建page方法演示
weixin_45966674的博客
02-27 1087
你想新建一个界面 就可以在想建的文件夹上 去右键 选择新建一个page。我们小程序运行时 这四个文件 最终会被编译成一个 page界面。其中 我们说过 pages 就是放我们所有page界面的。wxss 样式文件 写界面元素和全局的css样式。然后 我们再在这个文件夹下重复刚才创建page的操作。我们简述了整个小程序创建之初 几个模块与文件的作用。json 文件，界面的逻辑 展示 窗口等配置信息。所以 我们小程序 每个页面都是这四部分组成的。这样 它就直接把这四个文件创出来了。
微信小程序实现动态添加class的功能，其实这样做就可以了
qq_44415875的博客
04-04 5593
*思路：**网页中可能使用document.getElementById().addClass()实现，但是在小程序中无法使用document获取元素。小程序可以构造一个数据结构，根据业务需求动态修改数据去判断是否添加选中样式。
微信小程序 动态添加类名
仲广绪的博客
05-09 3981
微信小程序 动态添加类名 和vue的语法差不多，一个小测试 <view class="list-top"> <view data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick">头条</view> <view data-num="2" class="list-menu list-menu2 {{_num==2?'active':''}}" bindta
微信小程序系列3（新建page小技巧）
honaf的专栏
04-21 1万+
由于一个项目会有很多的页面,并且微信小程序建一个一面又需要有4个对应文件,所以这里我会讲到一个小技巧,怎么快速新建page. 在app.json全局配置的路由pages里面直接添加你要新加的page路径,如 “pages/set/set”,然后Ctrl+s保存一下,就会看到小程序目录中新增了set目录,同时也包括相应的文件,如图
微信小程序实现动态添加标签（1）
LZ511321的博客
08-19 3万+
说明：最近入住微信小程序，将自己所学经历分享出来，包括学到的知识，踩到的坑，一起分享给大家，后续会慢慢更新： 首先针对一些几乎没有基础的童鞋，附上一些链接，大致看完后能够有能力制作简单的小程序了： 1.官方文档： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 2.小程序实用入门教程： http://www.j
微信小程序如何动态增删class类名
热门推荐
翾的博客
06-07 7万+
简述由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.说明通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num
微信小程序动态增加组件、删除组件
^璐三岁要耍蓅氓♡
09-06 2万+
微信小程序、按钮、动态、添加、组件、控件 view class="page__bd"> view class="weui-article"> button bindtap="insert">增加课程button> button bindtap="delBind">删除课程button> form bindsubmit="formSubmit" bindrese
微信小程序如何动态修改page标签的css样式
weixin_30319153的博客
09-10 5691
前提：在app.wxss和自己组件页面的***.wxss里面都可以更改page对应的样式。 场景：页面page设置为灰色 直接 .page{ 　　background:#f8f8f8; } 但是这种场景下，如果该页面列表无数据，需要展示白色背景。这是需要动态根据页面有无数据，来改变背景的颜色。 demo.wxml <view class="page" st...
微信小程序中动态添加class类名
最新发布
01-05
在微信小程序中，可以通过数据绑定的方式实现基于条件动态添加 `class` 类名的功能。具体来说，在 WXML 文件中的元素上使用双大括号语法 `{{}}` 来插入 JavaScript 表达式的计算结果作为类名的一部分。 对于简单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值