微信小程序使用template标签实现五星评分功能-创新互联

前言

成都创新互联专注于延川企业网站建设,响应式网站设计,商城网站定制开发。延川网站建设公司,为延川等地区提供建站服务。全流程按需定制网站，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

微信小程序特点“无须安装，无须卸载，触手可及，用完即走”，适合轻量级应用快速开发。小程序模版思想是它开发的核心思想，可以帮助开发者减少很多重复代码，我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图：

创建模版

wxml文件：

以<template>为根节点，添加name属性用来区分不同模版：

<template name="starsTemplate">
 <view class='stars-container'>
  <view class='stars'>
  <block wx:for="{{stars}}" wx:for-item="i" wx:key="position">
   <image wx:if="{{i}}" src='/images/icon/star.png'></image>
    <!-- <image wx:elif="{{i==2}}" src='/images/icon/none-star.png'></image> -->
    <image wx:else src='/images/icon/none-star.png'></image>
  </block>
  </view>
  <text class='star-score'>{{score}}</text>
 </view>
</template>