zoukankan      html  css  js  c++  java
  • 小程序组件封装步骤

    学习链接:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

    1、创建一个组件文件夹component包括js、json、wxss、wxml

    在json文件里配置

     {"component": true}

    wxml中是组件要显示的内容

    <view class="inner">
    {{inteSt.width}}
    <swiper>
    <block wx:for="{{imgUrls}}">
    <swiper-item>
    <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
    </block>
    </swiper>
    </view>
    <slot></slot>

    js

    Component({
    properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    inteSt: {
    type: Object,
    value: {'name':'aa'},
    },
    data_json: {
    type: Object,
    value: 'default value',
    }
    },
    data: {
    // 这里是一些组件内部数据
    someData: {},
    imgUrls: [
    '../../images/2.png',
    '../../images/3.png',
    '../../images/1.png'
    ]
    },
    methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
    }
    })

    2、需要引入组件页面的json中药配置组件名称和路径

    {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是汽车维修技师",
    "navigationBarTextStyle": "black",
    "usingComponents": {
    "nav-block-one": "../../components/nav_block/nav_block1",
    "nav-block-two": "../../components/nav_block/nav_block2",
    "nav-block-three": "../../components/nav_block/nav_block3"
    }
    }

    需要引入组件页面wxml

    <nav-block-three inner-text="Some text" inteSt="{{line}}" data_json="{{item.json_data}}"></nav-block-three>

    需要引入组件页面的js

    Page({
      data: {
      line:{
      40,
      left:0,
      oldActive:0,
      swipeIndex:0,
      scrLeft:0,
      timeOut:''
    }

    })












  • 相关阅读:
    django模板语言导入自定html文件内容
    django模板语言中的自定义函数
    ID3决策树
    K近邻算法
    Mini-Batch 、Momentum、Adam算法的实现
    python3安装scrapy教程
    numpy高级应用
    numpy.random随机数生成
    numpy 线性代数
    numpy文件操作
  • 原文地址:https://www.cnblogs.com/studyh5/p/9863851.html
Copyright © 2011-2022 走看看