微信小程序使用template标签实现五星评分

最新推荐文章于 2024-07-31 18:30:30 发布

置顶

T丶快乐知己丬

最新推荐文章于 2024-07-31 18:30:30 发布

阅读量4.3k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 template 模版星星评分等级

本文链接：https://blog.csdn.net/qq_19707091/article/details/79300031

版权

本文介绍了如何在微信小程序中利用template标签创建五星评分组件。通过定义模版，设置样式，并进行数据转换，将数字评分转化为高亮或灰色星星显示。详细步骤包括创建模板、引用模板以及数据转换的方法。

摘要由CSDN通过智能技术生成

前言

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

创建模版

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