微信小程序案例:自定义组件
2020-06-03 04:34
666 查看
在很多地方都有列表,我做的项目就有几个地方重复了列表,想着把它变成自定义组件。
效果图
1.首先创建组件文件夹,以及shopList文件夹,右击选择新建component,自动创建。
2.首先我们需要声明自定义组件
3.在wxml中搭建界面
<view class="list"> <view wx:for="{{selectedList}}" wx:key class="item"> <image src="http://114.215.172.115:8080/img/14ce36d3d539b6003ba874c9e550352ac65cb76d.jpg" class="item_img"></image> <view class="item_des"> <text class="item_title">{{item.title}}</text> <text class="item_momey">{{item.money}}</text> </view> </view> </view>
4.shopList.wxss
.item_momey{ color:red; } .item_img{ width: 150rpx; height: 150rpx; background-size: 100%; margin-right: 20rpx; } .item{ display: flex; margin: 20rpx; } .item_des{ display: flex; flex-direction: column; margin-top: 10rpx; justify-content: space-around; } .list{ margin: 20rpx; }
5.shopList.js
// commpents/shopList.js Component({ /** * 组件的属性列表 * 用于组件自定义设置 */ properties: { selectedList:{ // 属性名 type:Array,// 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value:[] // 属性初始值(可选),如果未指定则会根据类型选择一个 } }, /** * 私有数据,组件的初始数据 * 可用于模版渲染 */ data: { }, /** * 组件的方法列表 * 更新属性和数据的方法与更新页面数据的方法类似 */ methods: { } })
5.slot的使用
在小程序的官方文档中,按照步骤就可以使用了。注意:在wx:for中只能创建出一个slot。
<!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view>
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } })
<!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </component-tag-name> </view> 组件样式
相关文章推荐
- 微信小程序自定义组件,模态框详细案例,自定义事件,组件传值
- 微信小程序 自定义二维picker组件(省市)
- 微信小程序 - 自定义components组件详解A篇
- 微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)
- 微信小程序自定义prompt组件步骤详解
- 自定义微信小程序视频组件播放按钮
- 微信小程序自定义组件
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- 微信小程序自定义组件示例
- 微信小程序自定义组件简单实现
- 微信小程序-自定义下拉框组件
- 微信小程序组件的自定义属性用法
- 微信小程序自定义组件
- 微信小程序自定义组件
- button组件、 onShareAppMessage 方法实现 —— 自定义传参 —— 微信小程序
- 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
- 微信小程序-自定义组件
- 微信小程序自定义组件:对话框、指示器、五星评分...
- 写一个微信小程序自定义公共组件
- 微信小程序 自定义组件(stepper)