一，创建组件
二，组件传入参数
三，组件接收参数
四，组件渲染参数
五，组件代码
<!--components/daoHangLan/daoHangLan.wxml-->
<view class="titles"><block wx:for="{{titles}}" wx:key="*this"><view class="item {{index === indexs ? 'active':''}}" bindtap = "onClick"data-index="{{index}}"><text > {{item}}</text></view> </block>
</view>
// components/daoHangLan/daoHangLan.js
Component({/*** 组件的属性列表*/properties: {titles:{type:Array,value:[1,2,3,4]}},/*** 组件的初始数据*/data: {indexs:0},/*** 组件的方法列表*/methods: {onClick(event){const indexs= event.currentTarget.dataset.indexthis.setData({indexs})this.triggerEvent("editTitles",event)}}
})
/* components/daoHangLan/daoHangLan.wxss */
.titles{display:flex;height: 40px;line-height: 40px;text-align:center;
}
.titles .item{flex: 1;
}
.titles .item.active{color:pink;
}
{"component": true,"usingComponents": {}
}
六，页面代码
<!--pages/five/five.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<daoHangLan titles="{{titles}}" bind:editTitles="onClickEditTitle"></daoHangLan>
<daoHangLan titles="{{xinghao}}" bind:editTitles="onClickEditTitle"></daoHangLan>
<daoHangLan titles="{{phone}}" bind:editTitles="onClickEditTitle"></daoHangLan>
// pages/five/five.js
Page({/*** 页面的初始数据*/data: {titles:["冰箱","电视","洗衣机"],phone:["手机","相机","飞机"],xinghao:["vivo","苹果","小米"]},onClickEditTitle(event){const indexs = event.detail}})
/* pages/five/five.wxss */
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar","daoHangLan":"/components/daoHangLan/daoHangLan"},"enablePullDownRefresh": true
}
