文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > 微信小程序 > 小程序开发 > 正文

小程序如何改变元素的样式

angryTom
发布： 2020-03-26 11:24:37
原创
4740人浏览过

小程序如何改变元素的样式

1、获取元素的样式

使用wx.createSelectorQuery()来获取元素

这里需要注意的是：获取元素样式的函数应该放在onReady：function(){}这个里面

let that = this
const query = wx.createSelectorQuery()
query.select('.detail-card').boundingClientRect()
query.select('.detail-header').boundingClientRect()
query.exec((res => {
    that.setData({
        cardHeight: res[0].height,
        headerHeight: res[1].height
    })
}))
登录后复制

2、修改元素的样式

这里思路是WXML中元素的样式利用style给一个变量，通过修改topList这个数组来修改top属性

<view 
    class="detail-card" 
    style="top:{{topList[index]+'px'}};z-index:{{index}}" 
    id="{{'card'+index}}" 
    wx:for="{{people}}" 
    wx:key="{{index}}" 
    catchtap="cardClick"
>
</view>
登录后复制

PHP中文网，大量免费小程序开发教程，欢迎学习！

以上就是小程序如何改变元素的样式的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：小程序如何获取手机号信息 下一篇：小程序前台怎么判断是空白消息
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
揭秘小程序在电影领域的应用价值——你的掌上电影院 嗨，各位朋友，我是你们的网事通告，今天我们来探讨一下那些隐藏在我们手机中的掌上神器——电影小程序。让我带领大家进入这个能让我们的观影体验大幅提升的迷你世界吧！想看电影吗？过去，你可能需要启动各种各样的APP，或者排队买票。但现在，一切都变得更加简便和优雅。小程序的出现，仿佛为电影爱好者们开启了一扇奇妙的大门。让我们一起深入了解吧！首先，电影小程序为我们提供了极为便捷的票务服务。你只需轻轻一点，各大影院的热映电影列表就会呈现在你面前。更棒的是，你可以一边躺在沙发上吃着爆米花，一边选择座位、完成支付
2025-06-09 09:30:02
151
采耳小程序在健康养生行业的崭新应用 采耳小程序在健康养生领域的创新应用，确实为用户提供了更便捷、安全且个性化的体验。预约与便捷性：通过小程序，用户可以轻松预约采耳服务，省去排队等待的时间。他们能够选择最适合的时间和地点，提升了服务的便捷性和灵活性。个性化服务：采耳小程序能够记录用户的偏好和历史数据，从而提供定制化的服务。这意味着可以根据用户的具体需求调整采耳的力度、时间和频率，满足个人的健康需求。健康数据追踪：某些采耳小程序可能整合了传感器等技术，帮助用户监测耳部健康数据，如耳廓状况和耳垢量。这些数据能让用户更全面地了解自己的耳部
2025-06-09 09:28:23
659
游戏小程序崩溃的常见原因及解决方案 哎呀，说起来，当你正沉浸在一个游戏小程序中，准备击败那个自称“游戏之神”的对手时，却发现程序突然陷入了“崩溃的深渊”。这真是让人恨不得砸手机的时刻！不过，冷静下来，我们不妨探讨一下这些游戏小程序为何会崩溃，以及如何避免这种突如其来的“灾难”。首先，性能问题是导致崩溃的常见原因之一。当游戏小程序试图一举登上珠穆朗玛峰，却忘了自己只是一只普通的蜗牛时，自然会感到呼吸困难。也就是说，过多的数据处理和图形计算超出了小程序的承载能力，它就会“晕倒”。解决方案就是优化。开发者需要将游戏设计得像一位懂得节制的
2025-06-09 09:08:11
517
定制文旅小程序这9个技巧你不容错过！ 在定制文旅小程序时，有几个关键技巧可以显著提升用户体验、增加吸引力并增强功能性。以下是九个重要技巧：个性化体验定制：为用户提供个性化的文旅体验，例如根据用户的位置和偏好提供定制化的推荐内容，以增强用户的粘性。导览和地图功能：提供景点导览和地图导航功能，方便游客在景点间移动和探索。多媒体内容丰富：提供图文并茂、音频、视频等形式的丰富内容，以增强用户体验和吸引力。互动体验：提供互动性功能，如AR（增强现实）导览、虚拟体验、互动游戏等，增加趣味性和参与度。预订和安排功能：提供门票预订、酒店预订、活动预
2025-06-09 09:06:21
463
活动策划适合用怎样的模板小程序? 活动策划已成为企业提升品牌知名度、吸引用户参与的重要策略之一。随着科技的发展，利用模板小程序进行活动策划成为一种新趋势。那么，活动策划应该选择怎样的模板小程序呢？本文将详细探讨这一问题。一、功能丰富且易于个性化定制对于活动策划来说，模板小程序首先应具备全面的功能，如活动报名、签到、互动、抽奖、数据统计等。这些功能能够覆盖活动策划的各个方面，确保活动顺利开展。同时，模板小程序应支持个性化定制，允许活动策划者根据具体需求调整页面布局、颜色风格、文字内容等，以契合活动主题和品牌形象。二、互动性强，提升
2025-06-09 09:02:21
571
优化用户体验设计，提升小程序的用户留存率 谈到小程序，这确实是现代人不可或缺的掌中宝。作为一个资深的互联网用户和挑剔的专家，我要讨论一下如何通过优化用户体验设计来提升这些迷人的小程序的用户留存率。不可否认，小程序的安全性是一个至关重要的话题。首先，得益于微信等社交巨头的支持，小程序已经成为我们日常生活中的必需品。然而，随着它们的快速发展，潜在的威胁也在增加。我们必须正视这一点，用户信息的安全性问题是直接影响用户留存率的关键因素之一。试想一下，如果用户每次打开小程序时，都担心自己的个人信息可能会像北极熊跳水一样，瞬间泄露，那么这个小程序肯
2025-06-09 09:02:01
660
维修小程序让技术与服务无缝对接 在这个互联网浪潮席卷的时代，如果你还在用螺丝刀笨拙地修理家中小电器，我得说，朋友，你可能有点落伍了。在线上与线下无缝连接的今天，维修行业也发生了巨大的变化，变得更加智能和便捷。关键词是什么？小程序！维修小程序，这款小巧的互联网工具，已经悄悄地融入了我们的生活，它使得技术与服务如同乐高积木般完美结合。首先，小程序的便利性令人赞叹。你只需轻触手机屏幕，一个专业的维修服务界面便会出现在你面前。空调不制冷了？水管漏水了？别担心，小程序为你提供了一站式的解决方案。你无需再搜索“附近的维修店”或拨打老式的服
2025-06-09 09:00:03
787
如何搭建支持共享小程序的平台？ 小程序已成为企业与用户之间沟通的重要桥梁。为了满足用户多样化的需求，搭建一个支持共享小程序的平台显得尤为重要。如何搭建这样一个平台，以便为开发者提供便捷的小程序开发环境，同时也为用户提供丰富的小程序应用体验？首先，我们需要明确搭建支持共享小程序的平台的目标和功能。这样的平台应具备以下几个核心功能：一是为开发者提供易用的开发工具，帮助他们快速创建和发布小程序；二是支持小程序之间的数据共享和互通，提升用户体验；三是提供稳定可靠的服务，确保小程序的正常运行。在搭建平台的过程中，我们需要选择合适的技术架
2025-06-09 08:52:11
917
小程序的优势在哪？小程序对比公众号的优势特点介绍 2018年小程序的发展势头迅猛，数据显示其增长令人震惊。从2017年1月正式上线到现在，仅用不到两年的时间，小程序相关的新闻和奇迹层出不穷，例如一夜之间获得千万用户的圣诞帽小程序。移动互联网时代已经全面进入了微信互联网时代！那么，小程序的优势是什么？与公众号相比，微信小程序有哪些优势？目前，微信的月活跃用户超过10亿，作为与微信深度绑定并拥有众多入口的小程序，已经服务了超过5亿用户。根据微信发布的数据，截至7月11日，已上线的小程序超过100万个，加入的小程序超过150万个；已有5000多个第三
2025-06-09 08:46:44
972
二手交易小程序需要办理哪些资质? 随着循环经济的蓬勃发展，二手交易市场愈加繁荣，二手交易小程序应运而生，为买卖双方提供了一个便捷的交易平台。然而，创办二手交易小程序并非轻而易举，需要通过一系列证件的办理来确保平台的合法合规运营。那么，究竟需要办理哪些证件呢？ICP许可证（互联网信息服务业务经营许可证）这是所有从事经营性活动的网站都必须办理的基础许可证，二手交易小程序作为在线交易平台也不例外。ICP许可证分为经营性和非经营性两种，通常情况下，二手交易小程序需要申请经营性ICP许可证。EDI经营许可证（电子数据交换业务经营许可证）由
2025-06-09 08:46:12
600
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部