微信小程序视图template模板引用
来源:互联网 发布:js 模块化开发 编辑:程序博客网 时间:2024/05/15 06:38
WXML 提供两种文件引用方式import和include。
include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置
temlate.wxml
<template name="tmp_data" > <view class="content"> <!-- 头像 --> <view class="author-date"> <image src="{{item.header_url}}" class="author"></image> <text class="date">{{item.date}}{{idx}}</text> </view> <!-- 标题内容 --> <text class="title">{{item.title}}</text> <image class="image" src="{{item.image_url}}"></image> <text class="article-content">{{item.content}}</text> <view > <image class="article-images" src="../../images/icon/chat.png"></image> <text class="article-text">66</text> <image class="article-images" src="../../images/icon/view.png"></image> <text class="article-text">88</text> </view> </view></template>
redirect.wxml引用
<import src="template/template.wxml" />
template.js
var content_for = [ { date: "2020年 10月 9日 ", title: "那年夏天", header_url: "/images/3.png", image_url: "/images/6.jpg", content: "天不言自高,地不言自厚,奇迹,是不会在容易的道路上绽放的。人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。", }, { date: "2022年 10月 9日 ", title: "夏天", header_url: "/images/3.png", image_url: "/images/8.jpg", content: "人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。", },]//输出出口module.exports={ templates: content_for}
redirect.js引用
var content_data=require('../../template/template.js')// pages/redirect/redirect.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ key: content_data.templates }); }});
wxml
<block wx:for="{{key}}" wx:for-item="item" wx:for-index="idx"> <!-- is就是模板名字name值 --> <template is="tmp_data" data="{{item}}" /> </block>
template.wxss文件
.title{ font-size: 34rpx; font-weight: 600; color:#333; margin-bottom: 20px;}
redirect.wxss文件引用上面样式
@import "template/template.wxss" //使用import定义swiper{ width:100%; height:500rpx;}swiper image{ width:100%; height:500rpx;}
不要老是责备队友太坑,要反思一下你为什么会匹配到这么坑的队友?
阅读全文
0 0
- 微信小程序视图template模板引用
- 微信小程序11---模板template
- 微信小程序-template模板使用
- 微信小程序 template模板的使用
- 微信小程序模板template的使用
- 微信小程序中template模板使用
- 数据视图和模板 View Template
- 微信小程序给嵌套template模板传递数据的方式
- C++模板元程序 Template Metaprograms
- 小程序模块化与模板化(template)
- WPF 逻辑树 LogicalTreeHelper、视图树 VisualTreeHelper、控件模板 Template
- django template 基础(二)(在视图中使用模板)
- 微信小程序-template模版
- 微信小程序入门-事件冒泡、模板、视图渲染
- 小程序-ListView 模板引用
- 模板Template
- 模板Template
- 模板(template)
- 微信小程序checkbox选中改变样式
- 安卓开发-处理WebView加载失败页面
- Phoenix常见用法
- 内江苏家桥医院
- 单链表的快速排序
- 微信小程序视图template模板引用
- 使用包含还是私有继承
- XHTML规范
- Eclipse在线安装Drools插件
- MTK6735 添加一个新的FLASH芯片--KMFNX0012M_B214
- 【BFS】poj 1979 Red and Black
- LeetCode14-Longest Common Prefix
- 图论刷题进程
- 数据对接—kettle使用知识7