您当前的位置: 首页 > 知识百科 > 微信小程序评分插件怎么开发?

微信小程序评分插件怎么开发?

时间:2023-07-01 14:05 阅读数:73 人阅读 分类:知识百科

  大家在使用小程序的时候应该能接受到很多需要大家对小程序项目进行评分的通知,比如腾讯小程序,就有为电影或电视剧评分的功能,这里面都涉及到了微信小程序评分插件的开发和使用。接下来小编就为大家介绍一下微信小程序评分插件怎么开发。

  以下是包含半颗星评分的五星评分的小程序插件的开发:

  效果如图

  

  小程序代码:

  1.index.wxml

  

  2.index.wxss

  .star-image {

  position: absolute;

  top: 50rpx;

  width: 150rpx;

  height: 150rpx;

  src: "../../images/normal.png";

  }

  .item {

  position: absolute;

  top: 50rpx;

  width: 75rpx;

  height: 150rpx;

  }1234567891011121314

  3.index.js

  //index.js

  //CSDN微信小程序开发专栏:blog.csdn/column/details/13721.html

  //获取小程序应用实例

  var app = getApp()

  Page({

  data: {

  stars: [0, 1, 2, 3, 4],

  normalSrc: '../../images/normal.png',

  selectedSrc: '../../images/selected.png',

  halfSrc: '../../images/half.png',

  key: 0,//评分

  },

  onLoad: function () {

  },

  //点击右边,半颗星

  selectLeft: function (e) {

  var key = e.currentTarget.dataset.key

  if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {

  //只有一颗星的时候,再次点击,变为0颗

  key = 0;

  }

  console.log("得" + key + "分")

  this.setData({

  key: key

  })

  },

  //点击左边,整颗星

  selectRight: function (e) {

  var key = e.currentTarget.dataset.key

  console.log("得" + key + "分")

  this.setData({

  key: key

  })

  }

  })

  微信小程序评分插件怎么开发大家都知道了吗?大家可以参照上文中的方法试着操作一下,应该很容易获得成功,如果大家还有不懂的地方,可以在微信小程序商店搜索相关资料。

  

  微信小程序评分组件怎么制作?

  微信小程序图标插件开发代码

  小程序富文本转化插件,小程序富文本是怎样转化插件的?