微信小程序视图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 formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
潜说js对象和数组
2011/05/25 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
详解Python中的type和object
2018/08/15 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python爬虫 requests-html的使用
2020/11/30 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
应届中专生自荐书范文
2014/02/13 职场文书
班委竞选演讲稿
2014/04/28 职场文书
优秀员工事迹材料
2014/12/20 职场文书
运动会广播稿300字
2015/08/19 职场文书
节约用水广告语60条
2019/11/14 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers