• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序组件Component

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

.组件模板和样式

类似于页面,自定义组件拥有自己的 wxml 和模板 wxss 样式。

   1.组件模板

组件的写法和页面的写法相同,组件模板与组件数据结合后生成的数节点,

将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点,用于承载组件

引用时候提供的子节点。

例如:

    <view class="wrapper">
      <view>这里是组件的内部节点</view>
      <slot></slot>
    </view>

  引用在页面的.json 文件中配置。

   "usingComponents": {
      "v-component": "/components/cs/cs"
     }

  "v-component" :为自定义的模板名字,页面引用的时候用,

  "/components/cs/cs"  引用组件的路径

页面中引用 如下:

    <v-component>
      <view>这里是插入到组件slot中的内容</view>
    </v-component>

2.组件中的模板数据绑定

与普通的模板数据绑定相同,动态像子组件传递数据。

例如:

  <v-component  prop-a="{{dataA}}" prop-b="{{dataB}}">
    <view>这里是插入到组件slot中的内容</view>
  </v-component>

组件接收到页面传递过来的数据,页面可以通过setData 来改变绑定的绑定字段。

(目前只能传递JSON数据)

 3.组件的wxml slot

默认情况下,一个组件的wxml 中只能有一个slot,需要使用多个slot 时,可以在组件js

声明启用。

    Component({

      options:{

      multipleSlots: true // 在组件定义的选项中启用多slot 支持

    },

   properties:{},

      methods:{}

    })

此时在组件就可以启用多个slot,以不同的name 来区分。

  例如:

   <view class="wrapper">
      <slot name=“head”></slot>
         <view>这里是组件的内部节点</view>
       <slot name="footer"></slot>
   </view>

   在使用的时候

     <v-component >
        <view slot="head">slot中的头部内容</view>
          <view slot="footer">slot中的底部内容</view>
    </v-component>

4.组件样式

组件对应wxss 文件的样式,只对组件wxml 内的节点生效。编写组件样式时注意:

(1) 组件和引用的页面,不能使用id选择器,(#a),属性选择器([a])和标签名属性

 选择器,请改用class 选择器。

(2) 组件和引用组件的页面中使用后代选择器(.a .b) 在极端情况下会有非预期的表现。

(3)子元素选择器(.a>.b) 只能用于view 组件与其子节点之间,用于其他组件可以能导致

   非预期的情况。

(4)继承样式,如font , color 会从外部组件继承到组件内。

(5)除继承样式外,app.wxss 中的样式,组件所在页面中的样式对自定义样式无效。

6)组件可以指定节点的默认样式 :host{color:yellow;}

 

5.外部样式

组件接收外部传入的样式类,可以在Component 中用externalClasses 定义若干个外部样式

类,这个特性可以用实现类似于,view 组件的 hover-class属性,页面可以提供一个样式类

赋予 view hover-class 这个一样式类写在页面中,而非, view 组件的实现中。

 例如:

/* 组件 custom-component.js */

    Component({

      externalClasses:['my-class']

    })

      <!-- 组件 custom-component.wxml -->

    <v-component class="my-class" >

   这段文本的颜色由外部组建的 class 觉得

</v-component>

组件的使用或者可以指定这个样式类对应的class, 就像使用普通属性样式一样

页面的WXML

    <v-component  my-class="red-text"></v-component>

      .red-text{

        color:red;

      }

 6.使用组件接收全局样式

  默认情况下,自定义组件的样式只受到wxss 的影响

(1) app.wxss 中使用了标签名选择器,影响到页面和全部组件,

(2) 在自定义的组件中激活了 addGlobalClass 选项,这样使自定义

组件能被app.wxss 或页面的wxss 中的所有样式。

 要激活 addGlobalClass 选项,只需在Component 构造中将 options.addGlobalClass

  字段为true (当激活了 addGlobalClass 选项后,存在外部样式污染样式组件的风险)

 /* 组件 custom-component.js */ Component({ options: {     addGlobalClass: true,   }   })

 /* 组件 custom-component.wxml  */

    <text class="red-text">

      这段文字颜色由 `app.wxss`和页面`wxss` 中的样式定义来规定

    </text>

    /*app.wxxs*/

    .red-text{

      color:red;

    }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap