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

2024-07-29 15:54:05

前言

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

创建模版

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>

wxss文件：

这里我们采用小程序推荐使用flex模型，横向排列五颗星星图片。

.stars-container {
 display: flex;
 flex-direction: row;
}
.stars {
 display: flex;
 flex-direction: row;
 height: 17rpx;
 margin-right: 24rpx;
 margin-top: 6rpx;
}
.stars image {
 padding-left: 3rpx;
 height: 17rpx;
 width: 17rpx;
}
.star-score {
 color: #1f3463;
}

模版使用

引用wxml模版：

<import src="../stars/stars-template.wxml" /> <!--这里引用模板文件最好使用相对路径-->

<template is="starsTemplate" data="{{stars:stars,score:average}}" /> <!--is指定使用模版的名称-->

引用wxss模版：

在使用模版文件对应的wxss文件中输入以下表达式即可

@import "../stars/stars-template.wxss";

数据装换：

我看到在使用模版wxml文件时有个data=“{{stars:stars,score:average}}”属性和数据，表示指定模版的数据，我们一般从后台获取的评分数据一般都是一个数字，比如：3.5，4，5等等，我们需要把这些数字转换成五个等级数组，决定评分星星显示什么图片，这里我们用1表示显示高亮的，0表示灰色星星，我们也可以在一个2表示半颗高亮的星星表示0.5的评分：

function convertToStarsArray(stars) {
 var num = stars.toString().substring(0, 1);
 var array = [];
 for (var i = 1; i <= 5; i++) {
  if (i < num) {
   array.push(1);
  } else {
   array.push(0);
  }
 }
 return array;
}

案例wxml代码：

<import src="stars/stars-template.wxml" />
<view style='margin:100rpx'>
 <template is="starsTemplate" data="{{stars:stars,score:average}}" />
</view>

到这里基本结束了，我们这评分转换成我们需要的评分数组，在使用模版的地方传入数据即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序五星评分效果实现代码

微信小程序五星评分效果实现代码很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi
微信小程序五星评分的实现实例

微信小程序五星评分五星级评分效果: <view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class=&qu
微信小程序实现星级评价效果

本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下效果预览: wxml代码部分: <view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='http://img02.tooopen.com/images/20150928/tooope
微信小程序实现的五星评价功能示例

本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite
微信小程序实现星级评分和展示

本文实例为大家分享了微信小程序实现星级评分和展示的具体代码,供大家参考,具体内容如下星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; 直接上代码 wxml部分 <view> <view>一:显示后台给的评分</view> <block wx:for="{{one_1}}" wx:key="item"> <image src='../../image/star.png
微信小程序五星评分(包括半颗星评分)实例代码

微信小程序五星评分一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml  <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-
微信小程序五星评价功能的实现

微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico
微信小程序实现星星评价效果

本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现 wxml文件  <view class='container'> <view class='evaluate_contant'>  <block wx:for='{{evaluate_contant}}' wx:key='' wx:f
微信小程序使用template标签实现五星评分功能

前言微信小程序特点"无须安装,无须卸载,触手可及,用完即走",适合轻量级应用快速开发.小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图: 创建模版 wxml文件: 以<template>为根节点,添加name属性用来区分不同模版: <template name="starsTemplate"> <view class='stars-container'&g
微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content">  <view class="author-date"> &
微信小程序模板template简单用法示例

本文实例讲述了微信小程序模板template简单用法.分享给大家供大家参考,具体如下: 模板呢,就是为了方便你重复写一些代码而建立的,目前我指发现它的功能适合建立一些表格类型的数据, 比如,录入认得信息啥的(都有名字,年龄,性别啥的) 1. index.wxml代码 <view class="page"> <template name="aafa"> <view> <text> 姓名:{{name}} 年龄:{{age
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

具体代码如下所示: // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"> <block wx:for="{{
微信小程序按钮去除边框线分享页面功能

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >
微信小程序canvas拖拽、截图组件功能

先看下微信小程序canvas拖拽功能组件地址 github.com/jasondu/wx-- readme近期补上实现效果如何实现使用canvas 使用movable-view标签由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题如何将多个元素渲染到canvas上如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层如何实现拖拽元素如何缩放.旋转.删除元素看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.
tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中:  <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im
微信小程序实现分享朋友圈的图片功能示例

本文实例讲述了微信小程序实现分享朋友圈的图片功能.分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求.查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不讨论了,因为我是不懂后端的,只会前端的东西,所以这里就记录一下前端的实现方法. 前端要实现分享到朋友群,都是通过canvas做一张图片,然后用户手动分享朋友圈.前端具体要做的就是把要分享的页面用canvas重做一遍,
微信小程序 scroll-view 实现锚点跳转功能

在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t

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

相关推荐

随机推荐