• 01 微信小程序创建组件和使用组件


    01 创建组件

    遇见的困难
    图标显示不出来,是因为你没有在组件的css中引入,所以显示不出来。
    我一直以为是一个坑。结果是自己没有整清楚
    
    

    01==》在page的同级目录下,创建一个文件夹,命名为components文件夹,这个文件夹是用来放组件的哈。

    02==》然后单击这个文件夹,选择创建一个目录(如topheader)。topheader在components文件夹下。

    03===》创建好了目录(topheader),在点击这个(topheader)这个文件夹。创建【page】

    02如何引入组件

    在创建好的组件中,有一个XXX.json文件。在这个文件中添加如下

    XXX.json
    {
        "usingComponents": {},
        "component": true //这一组的四个文件会被当做一个组件哈。
        //说明这是一个组件哈
    }
    
    循环数据,动态的class直接 class="{{item}}"这样就行哈,不需要写冒号
    XXX.wxml
    <view class="header-top">
        <block wx:for="{{paramAtoListIocn}}" :key="index">
            <text style='color:greenyellow;font-size:40rpx;' class=" iconfont  ali-size {{item}}"></text>
        </block>
    </view>
    
    XXX.wcss
    
    @import "../../styles/iconfont.wxss";
    //引入矢量图标库。否者图标不能够现实出来哈。
    
    .header-top {
        display: flex;
        justify-content: flex-end;
        padding: auto 30rpx;
    }
    
    .ali-size {
        margin-left: 20rpx;
    }
    
    XXX.js
    //注意在这个页面,原来的Page要替换成  Component哈,要注意这个
    Component({
      data: {},
      
      //父传子的参数哈
      properties: {
        paramAtoListIocn: Array
      },
    

    使用的界面。父组件中

    XXXX.json引入组件
    {
      "usingComponents": {
        "headertopicon": "/components/headertopicon/headertopicon",
      }
    }
    
    hmtl
    
    <view class="top-header">
        <headertopicon paramAtoListIocn='{{paramAtoListIocn}}' />
    </view>
    
    
    js
    
      data: {
        paramAtoListIocn: ["icon-bianqian", "iconshexiangtou", "icon-setup"]
      },
    
    
    css
    
    .top-header {
        height: 300rpx;
         100%;
        background: pink;
        padding: 20rpx;
    }
    

    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    头文件里面的ifndef /define/endif的作用
    互联网小知识
    IT技术开发人员获得成功的六大步骤
    ab网站压力测试
    微软校招试题
    C程序编译过程浅析
    makefile变量赋值
    printf的题目
    Oracle命名规范
    javascript(js)小数精度丢失的解决方案
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/12499236.html
Copyright © 2020-2023  润新知