微信小程序模块化/组件化开发
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标签>在template标签外面包一层view标签>,在view标签上绑定bindtap点击事件
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
微信小程序模块化/组件化开发
https://gaodaxiu-blog.netlify.app/posts/微信小程序模块化/组件化开发/相关文章智能推荐
1
微信小程序
微信小程序微信小程序
2
使用Astro搭建个人博客1
博客指南使用Astro搭建个人博客及部署,使用Firefly主题,使用Vercel部署
3
Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy?
VueVue 的响应式原理中 `Object.defineProperty` 有什么缺陷?为什么在 Vue3.0 采用了 `Proxy`,抛弃了 `Object.defineProperty`?
4
解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题
CSS解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题
5
临时在一段代码中取消eslint检查
Eslint临时在一段代码中取消eslint检查
随机文章随机推荐












