视频加载失败

微信小程序模块化/组件化开发

263 字
1 分钟
微信小程序模块化/组件化开发

将公用组件抽离出来#

把一些内容抽取到一个公有的页面中

1.在home下可以共用模板#

  • 1.在home文件夹下新建个目录(list-tmpl)
    • 模板中只能放两种文件、wxml;不支持js和json
    • 模板的标志template标签
    • 模板要给他起个名字,就是我们要调用这个模板的时候要用的名字<template name='name'></template>
    • 可以放多个模板,但每个模板都要有自己的名字
    • 同样css样式也要公有化
  • 2.导入模板(使用相对路径)
    • <import src='list-tmpl/list-tmpl.wxml'/>
    • is->模板名字,data->传入数据;<template is='list' data='{{item}}'></template>

此时home.wxml文件

<import src='list-tmpl/list-tmpl.wxml'/>
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}'>
<swiper-item wx:for='{{imgs}}'>
<image src='{{item}}'></image>
</swiper-item>
</swiper>
<block wx:for="{{lists}}">
<template is='list' data='{{item}}'></template>
</block>

2.引入css样式,此时home.wxss文件#

@import 'list-tmpl/list-tmpl.wxss';
swiper{
height: 400rpx;
}
swiper image{
width: 100%;
}

点击跳转详情页#

  • 事件不能直接绑在template标签上,因为在编译的过程中,最终会直接用一个模板将template替换掉。
    • 解决方案<在template标签外面包一层view标签>,在view标签上绑定bindtap点击事件

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
微信小程序模块化/组件化开发
https://gaodaxiu-blog.netlify.app/posts/微信小程序模块化/组件化开发/
作者
GaoDaXiu
发布于
2018-02-11
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
GaoDaXiu
Hello, I'm GaoDaXiu.
公告
欢迎来到我的博客!
分类
标签
最新动态
站点统计
文章
76
分类
20
标签
128
总字数
72,109
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
Netlify CI
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录