微信小程序使用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>

分享名称：微信小程序使用template标签实现五星评分功能-创新互联
当前URL：https://www.cdcxhl.com/article20/jscjo.html

成都网站建设公司_创新互联，为您提供外贸网站建设、全网营销推广、静态网站、商城网站、响应式网站、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容