Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2068633
  • 博文数量: 163
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 4982
  • 用 户 组: 普通用户
  • 注册时间: 2013-10-23 19:15
  • 认证徽章:
个人简介

qq:2162408571,小程序学习群:791749272,792247623

文章分类

全部博文(163)

文章存档

2018年(11)

2016年(20)

2015年(60)

2014年(41)

2013年(31)

分类: Web开发

2018-03-12 21:41:19

在编写小程序界面的时候,你会发现有很多东西非常类似,它们看起来就像一个组件一样。例如,我们可以看到豆瓣有一个5星的评分样式,如果要拿到小程序这里展示的话,本身是没有5星这个控件的(在android中有)。在小程序中,我们可以使用5个星状的图片来组成一个评分的工具条。你可以想象的到,这个评分工具就是5个image控件平铺排列,很简单的。


点击(此处)折叠或打开

  1. <view>
  2.     <image src='/images/logo.jpg' class="start.png"</image>
  3.     <image src='/images/logo.jpg' class="start.png"</image>
  4.     <image src='/images/logo.jpg' class="start.png"</image>
  5.     <image src='/images/logo.jpg' class="start.png"</image>
  6.     <image src='/images/logo.jpg' class="start.png"</image>
  7. </view>


上面的代码就可以简单的实现一个5星的评分工具,那如果我们要重复利用这个评分工具呢,是否每次都复制上面的代码???


一、小程序模板

   在小程序的wxml文件中,提供了模板机制,可以定义一个wxml的代码片段,然后在不同的地方调用

   1、定义模板

使用name属性,作为模板的名字。然后在内定义代码片段,我们来定义一个5星的评分模板



点击(此处)折叠或打开

  1. <template name="score">
  2.     <image src="/star.png"/>
  3.     <image src="/star.png"/>
  4.     <image src="/star.png"/>
  5.     <image src="/star.png"/>
  6.     <image src="/star.png"/>
  7. </template>


2、使用模板

1)使用 is 属性,声明需要的使用的模板,is=“模板名称”

2)使用import引入模板需要的wxml文件

例如要在index界面中使用评分模板


点击(此处)折叠或打开

  1. <import src="/pages/template/score-template.wxml" />
  2. <view class='today-container'>
  3.     <template is="score" /> <!-注意名字-->
  4. </view>


3、模板的样式

当我们在score.wxml中定义一个模板的时候,一般会同时匹配一个score.wxss样式文件。如果要使用样式文件那么你需要使用import语句引入,例如我们在index.wxml中引入了score.wxml文件,同时需要在index.wxss文件中引入score.wxss文件


点击(此处)折叠或打开

  1. @import "/pages/template/score.wxss"



二、需要传入数据的模板

    很多时候,我们的模板也是灵活的,他可以根据需要来传递不同的数据。同样还是上面的评分模板,我们来修改一下,让它实现不同的评分样式。例如可以让它显示更多的星星,或者用苹果图片来显示评分。

    下面我们来演示一个动态的评分条,评分图案以及个数都依赖js文件中的数据



点击(此处)折叠或打开

  1. <template name="score">
  2.     <view class='temp-con'>
  3.         <block wx:for="{{imgData}}">
  4.             <image wx:if="{{item===1}}" src='{{imgPath_t}}' class='item-img' />
  5.             <image wx:else src='{{imgPath_f}}' class='item-img' />
  6.         </block>
  7.     </view>
  8. </template> 



2、在使用template的时候,data属性传入数据。注意,一般我们会将传入的数据展开(使用“…”语法)


点击(此处)折叠或打开

  1. <import src="/pages/template/score.wxml"/>
  2. <view class='container'>
  3.     <image class="background" src='/images/weather-back.jpg'></image>
  4.     <view class="weather-container">
  5.         <template is="score" data="{{...scoreData}}"/>
  6.     </view>
  7. </view>

  8. Page({
  9.   
  10.     /**
  11.      * 页面的初始数据
  12.      */
  13.     data: {
  14.         scoreData:{
  15.             imgData:[1,0,0,0,0,0],
  16.             imgPath_t:"/images/cloud.png",
  17.             imgPath_f:"/images/sun.png"
  18.         }
  19.     },
  20. })



3、需要在引用模板的wxml文件中使用import引入template文件,同时

需要在对应的wxss文件中引入模板的wxss文件


阅读(569) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册