微信小程序视图template模板引用的实例详解


Posted in Javascript onSeptember 20, 2017

微信小程序视图template模板引用的实例详解

WXML 提供两种文件引用方式import和include。

include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置

微信小程序视图template模板引用的实例详解

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.js
Page({

 /**
  * 页面的初始数据
  */
 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;
}

本站关于小程序的文章还有很多,希望大家能搜索查阅,希望通过本文能帮助到大家,谢谢大家对本站的支持,

Javascript 相关文章推荐
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
highcharts 在angular中的使用示例代码
Sep 20 #Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 #Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 #Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 #Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 #Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 #Javascript
You might like
一些常用的php函数
2006/12/06 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
详解Python 最短匹配模式
2020/07/29 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
应届生服装设计自我评价
2013/09/20 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
初三数学教学反思
2016/02/17 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
详解Redis主从复制实践
2021/05/19 Redis
Python语言内置数据类型
2022/02/24 Python