精华内容
下载资源
问答
  • 2021-01-27 15:58:16

    前言

    组件对应 wxss 文件的样式,只对组件wxml内的节点生效;但是如果修改组件中如:checkbox、radio等它们的默认样式,在组件wxss中修改也是无效的;并且怎么在组件引用的页面去控制组件中的样式呢?

    方法

    一、暴露class

    在组件的js文件中将wxml中需要修改的标签class暴露出来,然后在引用组件时对暴露出来的class进行class覆盖;

    1. 在组件wxml中找到要修改的标签
    // 组件中需要修改的标签 如:
     <view class="myclass">我是组件内部标签</view>
    
    1. 在组件js文件中将这个class暴露出去
    /* 组件 myComponent.js */
    Component({
      externalClasses: ['my-class']  // 可以是多个class名
    })
    
    1. 在引用组件的页面中使用
    <myComponent my-class="text"></myComponent>
    
    1. 在在引用组件的wxss中修改样式
    .text {
    	color: red;
    }
    

    二、 样式共享

    在官网中有组件样式隔离这一说明,就是可以在组件内部去指定组件的样式与页面的样式之间如何共享和隔离;

    1. 指定特殊的样式隔离选项 在组件js文件中添加
    Component({
      options: {
        styleIsolation: 'shared'
      }
    })
    

    styleIsolation可以取一下几个值:

    1. isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响
    2. apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面
    3. shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)
    1. 使用addGlobalClass,即在 Component 的 options 中设置 addGlobalClass: true ;这个选项等价于设置 styleIsolation: apply-shared ,但设置了 styleIsolation 选项后这个选项会失效。
    /* 组件 myComponent.js */
    Component({
      options: {
        addGlobalClass: true,
      }
    })
    

    这样在页面中或者在app.wxss都可以设置组件中的样式了

    三、引用页面或父组件的样式

    即使启用了样式隔离 isolated ,组件仍然可以在局部引用组件所在页面的样式或父组件的样式。

    • 组件与页面
    • 在页面wxss中定义样式
    .blue-text {
      color: blue;
    }
    
    • 在组件中可以使用 ~ 来引用这个类的样式:
    <view class="~blue-text"> 这段文本是蓝色的 </view>
    
    1. 组件与组件
    • 如果在一个组件的父组件 wxss 中定义了:
    .red-text {
      color: red;
    }
    
    • 在这个组件中可以使用 ^ 来引用这个类的样式:
    <view class="^red-text"> 这段文本是红色的 </view>
    

    四【注意事项】

    • 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
    • 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用
    • 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
    • 继承样式,如 font 、 color ,会从组件外继承到组件内。
    • 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。

    #a { } /* 在组件中不能使用 /
    [a] { } /
    在组件中不能使用 /
    button { } /
    在组件中不能使用 /
    .a > .b { } /
    除非 .a 是 view 组件节点,否则不一定会生效 */

    更多相关内容
  • 微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。 第一步...
  • 微信小程序点击控件修改样式

    万次阅读 2018-03-14 17:20:39
    毕竟小程序是基于数据驱动的,也为了便于后续修改与维护,我们利用数据绑定来实现它。******第一种方法******one-&gt;进行布局wxml:&lt;view class="mn"&gt;点击样式改变&l...

    通常,页面呈现的效果,我们直接在css中进行,可是有时我们需要进行通过一系列操作比如点击后,要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变,比如hover等。毕竟小程序是基于数据驱动的,也为了便于后续修改与维护,我们利用数据绑定来实现它。

    ******第一种方法******

    one->进行布局wxml:

    <view class="mn">点击样式改变</view> 

    two->样式美化wxss:

    .mn{
      width: 300rpx ;
      height: 80rpx;
      border: 1rpx solid red;
      line-height: 80rpx;
      text-align: center;
      margin-left: 100rpx;
    }

    未点击时的样式

    .bg1{
      background-color: yellow;
      color: coral;
    }

    点击以后的样式

    .bg2{
      background-color: green;
      color: white;
    }

    three->样式改变js:

    布好局与样式准备好后,怎样进行样式的改变呢?在wxml中绑定数据(数据绑定的方法很多,比如像下面的三目运算符判断,也可以直接绑定单个变量,在data设置出它的初始值,然后通过setData改变值等,实现过程不同,最终的结果都可以达到相同),并绑定点击事件。

    <view class="mn {{bg?'bg1':'bg2'}}" bindtap="change">点击样式改变</view> 

    绑定好事件后,我们在js中实现这个方法。

    Page({
      data: {
      // 一开始,我们将bg设为true,通过bg?'bg1':'bg2'得知,未点击时效果为bg1
       bg: true
      },
      // 当点击以后, bg由true变为false,通过bg?'bg1':'bg2'得知,点击以后的效果为bg2
      change: function(){  
        this.setData({
          bg: false
        })
      }  
    })    

    four->最后,得到我们想要的效果,如下:




    *******第二种方法******

         此外,除了上述三目运算符数据绑定的方式外,我们还可以这样绑定数据等等:

    wxml代码:

    <view class="mn {{bg}}" bindtap="change">点击样式改变</view> 

    wxss代码:

    .mn{
      width: 300rpx ;
      height: 80rpx;
      border: 1rpx solid red;
      line-height: 80rpx;
      text-align: center;
      margin-left: 100rpx;
    }
    /* 未点击时的样式 */
    .bg1{
      background-color: yellow;
      color: coral;
    }
    /* 点击以后的样式 */
    .bg2{
      background-color: green;
      color: white;
    }

    js代码:

    Page({
      data: {
        bg:"bg1"
      },
      change: function(){  
        this.setData({
          bg:"bg2"
        })
      }  
    })    

    效果与上面一样:

    说明:这种方法对于实现与图片相关的改变,非常好,我们知道在微信小程序中,wxss不能直接添加图片。

    wxml代码:

    <view class="Img" bindtap="change" style="background:url({{url}}) no-repeat">图片</view> 

    wxss代码:

    .Img{
      width: 160rpx ;
      height: 60rpx;
      border: 1rpx solid green;
      text-align: center;
      margin-left: 100rpx;
      font-size: 28rpx;
    }

    js代码:

    Page({
      data: {
        url:"../../images/reserve1.png"
      },
      change: function(){  
        this.setData({
          url: "../../images/reserve2.png"
        })
      }  
    })    

    效果(点击前后):




    ******第三种方法******

    说明:对于改变控件样式,除了像上面这样外,我们还可以把样式直接写在wxml,像下面这样

    <view class="ch" bindtap="change" style="{{bg?'color:red':'color:green'}}">改变</view> 
    .ch{
      width: 160rpx ;
      height: 60rpx;
      border: 1rpx solid green;
      text-align: center;
      margin-left: 100rpx;
      font-size: 28rpx;
    }
    
    Page({
      data: {
       bg:true
      },
      change: function(){  
        this.setData({
          bg:false
        })
      }  
    })    

    效果(点击前后):


         ------>这种方法不太推荐使用,一般用来测试,不利于代码维护。



    ******总结@当样式要发生改变时******

    对于直接的样式wxss,我们就用第一与第二种方法------>在wxss中写好需要的样式,在wxml中进行数据绑定与事件绑定,在js中实现;

    对于图片相关的,我们就用第二种方法;

    第三种不太推荐。




    展开全文
  • 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件。 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段...
  • 小程序日期时间组件demo,支持同时选择日期和时间。代码可以直接运行,但是需要具备小程序开发入门技术。
  • hidden组件不要和我们的display一起使用: 在我们的微信小程序中我们的这个屏幕的大小的话等于我们的750rpx 在我们的微信中引入我们的样式 ...微信小程序的按钮控件button 在我们的这个位置 的话就是控制我们的...

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    hidden组件不要和我们的display一起使用:
    在这里插入图片描述
    在我们的微信小程序中我们的这个屏幕的大小的话等于我们的750rpx

    在这里插入图片描述
    在这里插入图片描述
    在我们的微信中引入我们的样式
    在这里插入图片描述
    样式选择器:
    在这里插入图片描述
    有关我们less的语法:

    在这里插入图片描述
    微信小程序中的常见的组件:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    使用土豆图床将我们的图片山传到我们的网络上
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    计算
    在这里插入图片描述
    微信小程序swiper的属性:
    在这里插入图片描述
    在这里插入图片描述
    我们微信小程序的navagate组件:页面的跳转
    在这里插入图片描述
    在这里插入图片描述
    我们微信小程序中的富文本标签:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    微信小程序的按钮控件button
    在这里插入图片描述
    在这里插入图片描述
    在我们的这个位置 的话就是控制我们的外观图标:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在我们的这个位置的话就是添加我们的相关的客服的按钮
    在这里插入图片描述
    在我们的小程序中的icon图标:
    在这里插入图片描述
    在这里插入图片描述
    在我们的这个位置的话就是学习我们的单选框标签:
    在这里插入图片描述
    在我们的这个位置的话就是设置我们的相关的方法然后的话就是我们的js逻辑的代码
    在这里插入图片描述
    在我们的微信小程序的复选框:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    给我们选中的元素赋值:
    在这里插入图片描述
    然后的话我们的多选框就打印出来了
    现在的话就是学习我们微信小程序的自定义组件:

    在这里插入图片描述
    在这里插入图片描述
    在我们的这个位置的话就是设置我们的相关的方法:
    在这里插入图片描述
    哪一个页面或是文件要使用我们的行增组件的话就是在我们的哪一个文件的组件中引用我们的组件。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 小程序自定义日期选择控件

    万次阅读 2018-01-12 18:08:29
    对于微信小程序,微信提供了一个滚动选择器和自身的日期滚动选择器,但是开发中难免存在一些自定义的样式,这时候就要自己来定义了。下面我来简单介绍一下怎么自定义: 1,首先微信提供了一个滚动选择器:picker-...

    介绍:

    对于微信小程序,微信提供了一个滚动选择器和自身的日期滚动选择器,但是开发中难免存在一些自定义的样式,这时候就要自己来定义了。下面我来简单介绍一下怎么自定义:
    1,首先微信提供了一个滚动选择器:picker-view,picker-view官方说明:
    https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html
    2,我们这里是自定义了一个组件,所以需要了解一下微信的自定义组件,自定义组件官方说明:
    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/wxml-wxss.html
    3,我们才用了三个picker-view,分别存入年,月,日,这样方便监听年月日的变化,因为每个月的最大天数不一样。

    深入说明我就不说了,大家自己看源码吧,下面给出源码地址和效果图:

    效果图:

    git地址:https://github.com/fuxingkai/frankui-weapp,走过路过给个star和fork一下,欢迎大家吐槽。

    展开全文
  • 本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, ...
  • 【前端】小程序日历控件分享

    万次阅读 热门讨论 2017-10-26 17:07:20
    之前小程序开发需要用到日历控件,但是关于小程序可用的实在资源有限,于是就自己写了一个,如今项目上线后将它分享出来,希望能帮到需要的人。 效果图: JS代码:dateData: function () { let dataAll = []//...
  • 我们先看下效果图微信小程序radio-group控件的自定义官方的接口不能自定义radio-group按钮图片,如果我们想自己定义一个radio-group按钮的选择状态的布局。我们需要自己实现。因为微信小程序是数据驱动界面的,所以...
  • 小程序自定义城市选择控件

    千次阅读 2018-01-16 14:25:25
    对于微信小程序,微信提供了一个滚动选择器和自身的城市滚动选择器,但是开发中难免存在一些自定义的样式,这时候就要自己来定义了。下面我来简单介绍一下怎么自定义: 1,首先微信提供了一个滚动选择器:picker-...
  • 1.点击wx:for循环的view时添加...先写两个class样式一个是未选中是的一个是选中后的样式: /*点击前的样式*/ .classify_normal{ width: 160rpx; height: 110rpx; display: flex; justify-content: center; align-item...
  • 微信小程序设置控件权重

    千次阅读 2017-12-07 15:57:40
    项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单。 1.横向水平布局: 实现水平布局,需要四个view容器组件,其中一个是父容器。如下: box1 box2...
  • 在Axure提供的组件中,复选框的样式是固定的,不能修改。如果你想美化复选框的样式,你只能自己做。有两种方法可以美化它:1。您可以自己绘制构件的形状,并通过填充颜色、设置笔划和阴影来美化它。2。如果您有更高...
  • 复制粘贴 改颜色就行 1、checkbox checkbox .wx-checkbox-input{ border-radius:50%; width: 40rpx; height: 40rpx...
  • 微信小程序:Picker控件

    2020-05-08 10:35:33
    mode值代表着不同的选择样式 以下时mode所在值 普通选择器: 效果演示: 代码: <picker mode="selector" range="{{people}}" range-key="name" value="2" bindchange="myChange">普通选择器</picker> ...
  • 微信小程序基础之input输入框控件

    万次阅读 多人点赞 2016-12-13 14:52:35
    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用。首先主页面中将登录的...
  • <小程序>修改button组件的样式

    万次阅读 2017-07-22 11:04:41
    其实button在小程序中有不少好的样式,完全可以转换成我们想用的适用场景按钮,只需要修改css样式即可。 这需要对css样式有一定的了解,打开调试,选中上方的Wxml,可以查看到button组件的所有的样式, 可以通过...
  • 微信小程序 input控件高宽设置

    万次阅读 2018-09-19 11:03:34
    微信小程序 input控件高宽设置 在微信小程序中,很多控件设置了感觉没有变化,最近做项目时,遇到了input控件的宽高难以设置问题。 wxml &lt;input class='input-radius' placeholder='请输入项目名称' ...
  • 小程序即时通讯聊天控件(一)

    万次阅读 多人点赞 2017-11-06 12:21:52
    小程序即时通讯——文本、语音输入控件(一)集成近期一直在做微信小程序,业务上要求在小程序里实现即时通讯的功能。这部分功能需要用到文本和语音输入及一些语音相关的手势操作。所以我写了一个控件来处理这些操作...
  • 1、需要的东西 一张透明背景的图片:proper.png 2、效果展示 默认选中样式改变的为“距离优先”,当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式)3、源码:wxml代码&lt;view class....
  • 最近公司app客户端没有新的需求了,接下来的工作任务是学习微信小程序的开发,先从最基本的控件开始学习。一、视图容器1、view的使用wxml文件中的代码://创建一个view,class='style'是引用wxss文件中的样式...
  • 1.代码中写出样式,展开的内容用if绑定上checkedall 2.点击图标时候,图标进行变化(展开收起) 3.获取数据的方法 map(转换)每一项都有每一项的删除/编辑等,如果不写的话点击一处会显示所有行的班级/删除 ...
  • 微信小程序常用表单组件

    千次阅读 多人点赞 2022-03-16 23:43:01
    微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为...
  • 需求:通过点击button修改dataList中checkResult的值并修改按钮状态。 a.wxml: <view wx:for="{{dataList}}" wx:key='index' class='list-body'> <view> <view>编码:{{item.equipC...
  • 1.新建一个基于对话框MFC应用程序TestButton,向其中添加Button控件 2.设置button控件为自绘属性 方法一:设置Owner Draw为True 方法二:将按钮修改为BS_OWNERDRAW风格,允许button采用自绘模式 GetDlgItem
  • 今天问卷做完,结果经理说样式要和微信小程序的一样,我用原生的select默认样式和微信的完全不一样,故此采用weui,在用weui之前要导入所需要的文件 <!--引入css样式文件--> <link rel="stylesheet" ...
  • 微信小程序样式选择器(二)

    千次阅读 2018-07-20 18:35:44
    :link:链接没有被访问时的效果(微信小程序不支持) :hover:鼠标经过的效果(微信小程序不支持) :visited:链接被访问后的效果(微信小程序不支持) :active:鼠标点下去的效果(正发生在点的那一下) ...
  • Vant Weapp 日历calendar微信小程序多种应用(样式更改,默认区间显示,点击日历时间同步数据,只显示今天之前的数据等) 我第一次使用这个组件时,小白使用,真是叫“天天不应,叫地地不灵”,好多东西度娘根本告诉...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,877
精华内容 21,950
关键字:

小程序修改选中控件样式

友情链接: 0721689.zip