一. 新建目录结构
1.在 pages 同级目录下,新建 components 文件夹,用于存放不同的组件
2.新建组件文件夹,名称和功能对应
3.右键选择 “新建组件”,输入名称,自动生成四种类型的文件
二. 自定义组件
1.在需要使用自定义组件页面的 json 文件中添加引用
2.在自定义组件的 wxml 文件中编写组件模版
wxml:
<!--components/position-list/position-list.wxml-->
<view wx:for="{{positionlist}}" wx:for-item="item">
<view bindtap="gotoDetail" data-id="{{item.id}}">
<view>
<view>{{item.name}}</view>
</view>
<view>
<view>
<view>学历:{{item.education}}</view>
<view>专业:{{item.major}}</view>
</view>
<view>
<view>{{item.enterpriseName}}</view>
</view>
</view>
</view>
3.在自定义组件的 wxss文件中编写样式
这里导入了app.wxss公共样式,重复的样式就不用再写一遍了。
wxss:
@import '/app.wxss';
/* 页面上的其他样式 */
...
三. 父子组件的传值
1.父级给子组件传参
2.子组件给父级传参
其他微信小程序相关博客:
微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案
原文地址:https://blog.csdn.net/j1231230
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。