微信小程序–自定义公共组件

微信小程序–自定义公共组件

存放位置：component/自定义组件名-称文件夹

使用方法：在页面的json文件中，然后在页面以标签形式使用

{
"usingComponents": {
"searchInput": "../../component/searchInput/searchInput",
"tabs": "../../component/tabs/tabs"
},
"navigationBarTitleText": "商品列表"
}

搜索框：searchInput

<view class="search_input">
<navigator url="/pages/search/search" class="u-f-ajc">
搜索
</navigator>
</view>

/* component/searchInput/searchInput.wxss */
@import "../../styles/flex.wxss";
.search_input {
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
navigator {
height: 100%;
background-color: #fff;
border-radius: 15rpx;
color: #666;
}
}

{
"component": true,
"usingComponents": {}
}

tab栏切换

<view class="tabs">
<view class="tabs_title">
<view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabList}}" wx:key="id" bindtap="handleItem" data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<!-- slot 标签
其实就是一个占位符
插槽
等到 父组件 调用 子组件的时候 再传递
标签过来
最终
这些被传递的标签
就会替换 slot 插槽的位置 -->
<slot></slot>
</view>
</view>

/* component/tabs/tabs.wxss */
.tabs {
.tabs_title {
display: flex;
padding: 10rpx 0;
.title_item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
}
}
.active {
color: red;
border-bottom: 5rpx solid currentColor;
}
.tabs_content {
}
}

{
"component": true,
"usingComponents": {}
}

// component/tabs/tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
tabList: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItem(e) {
const { index } = e.currentTarget.dataset;
this.triggerEvent("itemChange",{index});
}
}
})

最后

以上就是迷你时光为你收集整理的微信小程序–自定义公共组件的全部内容，希望文章能够帮你解决微信小程序–自定义公共组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。