微信小程序怎么修改自定义组件中的样式

这篇具有很好参考价值的文章主要介绍了微信小程序怎么修改自定义组件中的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到externalClasses方法。
一.自定义子组件:

  1. components/test/index.wxml:
    在class类名里写入需要的外部样式类
 <view class="test-class"></view>

2.pages/test/index.js

  Component({
        externalClasses:['test-class']
    })

二.页面上引入组件
1.test.json:

"usingComponents":{
     "test-comp": "/components/test/index",
}

2.test.wxml
在父组件的标签上写入子组件externalClasses配置项传入的值作为css的class类名称

<test-comp test-class="test"></test-comp>

3.test.wxss文章来源地址https://www.toymoban.com/news/detail-520781.html

  .test{
    margin-right: 15rpx;
    margin-bottom: 10rpx;
    border-radius: 15px !important;
    }

到了这里,关于微信小程序怎么修改自定义组件中的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化

    ①在项目的根目录中,鼠标右键,创建 components - test 文件夹 ②在新建的 components - test 文件夹上,鼠标右键,点击\\\"新建 Component \\\" ③键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为 js , json ,. wxml 和. wxss 注意,为了保证目录结构的清晰,建议把不同的

    2024年02月15日
    浏览(46)
  • 微信小程序原生button组件使用并修改样式

     想使用原生button组件,但是想使用不同样式 注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 如果是多端适配,需要使用type为default再修改样式  

    2024年02月14日
    浏览(32)
  • 微信小程序switch开关组件修改样式(大小,颜色)

    以上尺寸根据你的具体情况来调整

    2024年02月11日
    浏览(41)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(44)
  • 微信小程序自定义字体样式、字体修改、第三方字体设置

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(54)
  • 微信小程序修改radio的样式,以及获取radio选择的值(自定义radio样式)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年01月15日
    浏览(31)
  • 微信小程序Vant Weapp-Card 商品卡片自定义修改样式

          商品卡片,用于展示商品的图片、价格等信息。       官方文档给出的配置项对大多数人来说都太官方,这是官方给出的。       高级用法               可以通过插槽添加定制内容。         在官方文档中给出的示例配置中,你根本无法调整中部宽度。  van-card

    2024年03月24日
    浏览(40)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(36)
  • 【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案

    在使用uniapp框架开发微信小程序时,使用到了uni-ui的uni-table组件。由于需要修改表头的背景色,于是乎在微信开发工具中使用调试工具审查元素获取其class名: 尝试直接在页面中修改样式: 结果无效。于是尝试使用深度选择器 依然无效。然后查询微信平台官方开发文档得知

    2024年02月02日
    浏览(48)
  • uniapp rich-text 富文本组件在微信小程序中自定义内部元素样式

    rich-text 富文本组件在 微信小程序 中,无法直接通过 外部css样式 控制文章内容样式。 解决方案:将传入的富文本内容截取并添加自定义样式类名 (1)全局配置filter方法,实现富文本内容截取转换,附上‘rich-txt-p’样式类 (2)在app.vue中编辑‘rich-txt-p’内容,即富文本需要

    2024年02月19日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包