微信小程序實現【點擊 滑動 評分 評星(5星)】功能

wxml文件:

    <view class="wxpl_xing"><view class="manyidu">{{scoreContent}}</view><view><block wx:for='{{scoreArray}}' wx:for-item="item"><view class='starLen' bindtap='changeScore' data-sy="{{index}}"><image class='star' src="{{score>index?fullStarUrl:nullStarUrl}}" /></view></block></view></view>

js文件:

Page({data: {bsm: '', //標識碼fullStarUrl: '../../images/fullStar.png', //滿星圖片nullStarUrl: '../../images/nullStar.png', //空星圖片score: 0, //評價分數scoreArray: [0, 1, 2, 3, 4, 5], //5.非常滿意,4.滿意,3.比較滿意,2.一般,1.不滿意,0.非常不滿意scoreText: ['非常不滿意', '不滿意', '一般', '比較滿意', '滿意', '非常滿意'], //評分列表scoreContent: '' //文字顯示評分情況},changeScore: function (e) {var that = this;var wxsy = e.currentTarget.dataset.sythat.setData({score: wxsy+1,scoreContent: that.data.scoreText[wxsy]}) },
})

wxss文件:

.wxpl_xing{ position: fixed; background: #fff; height:240px; bottom: 0px; width: 100%; z-index: 11; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.manyidu{ font-size:28rpx; padding-bottom: 30rpx; height: 40rpx; line-height: 40rpx;}
.starLen{margin-right:10px;display:inline-block}
.star{width:30px;height:30px;vertical-align:text-bottom;display:inline-block}
.scoreContent{margin-left:100px;display:inline-block}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165189.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165189.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165189.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vuex中的常用屬性有哪些?

在 Vuex 中&#xff0c;有一些常用的屬性可以幫助你管理應用程序的狀態。這些屬性包括 state、getters、mutations 和 actions。 state: 用于存儲應用程序的狀態數據&#xff0c;是 Vuex 存儲數據的地方。當應用程序中的多個組件需要共享狀態時&#xff0c;就可以將這些共享的狀…

力扣283:移動零(JAVA)

題目描述: 意思是將所有0移到最后的同時其余非0元素位置仍然不變 如 1 2 0 5 2 0 經過移動零后變為 1 2 5 2 0 0 思路:使用雙指針的思路來寫 fast:從左往右遍歷數組 slow:非零元素最后的一個位置 將數組分為3個區間 [0,slow]為處理好的非0數據,slow永遠指向最后一個非0數據 [s…

Java面向對象第一天

什么是類&#xff1f;什么是對象&#xff1f; 現實生活是由很多很多對象組成的&#xff0c;基于對象抽出了類 對象&#xff1a;軟件中真實存在的單個的個體/東西 類&#xff1a;類型/類別&#xff0c;代表一類個體 類是對象的模板/模子&#xff0c;對象是類的具體的實例 類中…

docker mysql 宿主機掛載配置文件

官方文檔摘錄&#xff08;勿噴&#xff0c;僅供自己筆記&#xff09; 官方文檔如下&#xff1a; The MySQL startup configuration is specified in the file /etc/mysql/my.cnf, and that file in turn includes any files found in the /etc/mysql/conf.d directory that e…

GoLang語言范圍(Range)

目錄 一、在數組、切片上使用‘range’ 二、在映射上使用range 三、在通道上使用range Go語言中的range關鍵字用于迭代數組&#xff08;數組、切片、字符串&#xff09;、映射&#xff08;map&#xff09;、通道&#xff08;channel&#xff09;或者在 for 循環中迭代每一個…

案例022:基于微信小程序的行政復議在線預約系統

文末獲取源碼 開發語言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 數據庫&#xff1a;mysql 5.7 開發軟件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序開發軟件&#xff1a;HBuilder X 小程序…

Django之中間件

引入 1、Django自帶7個中間件&#xff0c;每個中間件都有各自的功能 2、django能夠自定義中間件 3、使用場景&#xff1a; 1. 全局身份校驗 2. 全局用戶權限校驗 3. 全局訪問頻率的校驗 ...... 【1】什么是中間件 Django中間件是一個輕量級、可重用的組件&#xff0c;用于處理…

python運行jackhmmer二進制命令的包裝器類

jackhmmer 是 HMMER 軟件套件中的一個工具&#xff0c;用于進行高敏感度的蛋白質序列比對。HMMER&#xff08;Hidden Markov Model based on profile&#xff09;是一套用于分析蛋白質序列的工具&#xff0c;它使用隱藏馬爾可夫模型&#xff08;HMM&#xff09;來建模蛋白質家族…

nodejs微信小程序+python+PHP -留學信息查詢系統的設計與實現-安卓-計算機畢業設計

目 錄 摘 要 I ABSTRACT II 目 錄 II 第1章 緒論 1 1.1背景及意義 1 1.2 國內外研究概況 1 1.3 研究的內容 1 第2章 相關技術 3 2.1 nodejs簡介 4 2.2 express框架介紹 6 2.4 MySQL數據庫 4 第3章 系統分析 5 3.1 需求分析 5 3.2 系統可行性分析 5 3.2.1技術可行性&#xff1a;…

543. 二叉樹的直徑 --力扣 --JAVA

題目 給你一棵二叉樹的根節點&#xff0c;返回該樹的 直徑 。 二叉樹的 直徑 是指樹中任意兩個節點之間最長路徑的 長度 。這條路徑可能經過也可能不經過根節點 root 。 兩節點之間路徑的 長度 由它們之間邊數表示。 解題思路 最長長度可以理解為左子樹最長路徑加上右子樹最長…

MySQL錯誤之ONLY_FULL_GROUP_BY

報錯信息&#xff1a; 翻譯&#xff1a; 對該報錯的解釋 所以&#xff0c;實際上該報錯是由于在SQL查詢語句中有group by&#xff0c;而這個包含group by的SQL查詢寫的并不規范導致的&#xff0c;這個ONLY_FULL_GROUP_BY模式開啟之后檢查就會很嚴格&#xff0c;如果select列表…

uniapp為什么能支持多端開發?uniapp底層是怎么做的?

文章目錄 前言uniapp為什么能支持多端開發&#xff1f;uniapp底層是怎么做條件編譯uniapp的語法uniapp如何編譯為不同端的代碼uniapp的底層是如何做平臺特性適配的呢&#xff1f;后言 前言 hello world歡迎來到前端的新世界 &#x1f61c;當前文章系列專欄&#xff1a;uniapp &…

【lua】記錄函數名和參數(為了延后執行)

需求背景 一個服務緩存玩家信息到對象里&#xff0c;通過對象的函數定時同步到數據庫中&#xff0c;如果玩家掉線 清空對象&#xff0c;但是后續步驟導致對象數據需要變更&#xff0c;對象不存在&#xff0c; 就不方便變更了&#xff0c;怎么處理&#xff1f; 方案思考 1.臨…

計算機網絡——路由

文章目錄 1. 前言&#xff1a;2. 路由基礎2.1. 路由的相關概念2.2. 路由的特征2.3. 路由的過程 3 路由協議3.1. 靜態路由&#xff1a;3.2. 動態路由&#xff1a;3.2.1. 距離矢量協議3.2.2. OSPF協議&#xff1a;3.2.2.1.OSPF概述OSPF的工作原理路由計算功能特性 3.2.2.2.OSPF報…

【Kafka】Java整合Kafka

1.引入依賴 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.3.1</version></dependency> 2.搭建生產者 package com.wen.kafka;import org.apache.kafka.clients.produ…

Vuejs+ElementUI搭建后臺管理系統框架

文章目錄 1. Vue.js 項目創建1.1 vue-cli 安裝1.2 使用 vue-cli 創建項目1.3 文件/目錄介紹1.4 啟動 Web 服務 2. 集成 Vue Router 前端路由2.1 Vue Router 是什么2.2 集成 Vue Router 方法2.3 使 Vue Router 生效 3. 集成 Vuex 組件3.1 Vuex 是什么3.2 集成 Vuex 方法3.3 使 V…

2023全球數字貿易創新大賽-人工智能元宇宙-4-10

目錄 競賽感悟: 創業的話 好的項目 數字工廠,智慧制造:集群控制的安全問題

dlv 安裝與使用

dlv 安裝 第一步&#xff1a; # git clone https://github.com/go-delve/delve # cd delve # make install 第二步&#xff1a; # ln -s /root/go/bin/dlv /usr/local/bin/dlv 第三步&#xff1a; # dlv version Delve Debugger Version: 1.21.2 Build: d6f215b27b6d8a4e4…

Excel中出現“#NAME?”怎么辦?(文本原因)

excel 單元格出現 #NAME? 錯誤的原因有二&#xff1a; 函數公式輸入不對導致 #NAME? 錯誤。 在單元格中字符串的前面加了號&#xff0c;如下圖中的--GoJG7sEe6RqgTnlUcitA&#xff0c;本身我們想要的是--GoJG7sEe6RqgTnlUcitA&#xff0c;但因為某些不當的操作在前面加了號&…

vue+SpringBoot的圖片上傳

前端VUE的代碼實現 直接粘貼過來element-UI的組件實現 <el-uploadclass"avatar-uploader"action"/uploadAvatar" //這個action的值是服務端的路徑&#xff0c;其他不用改:show-file-list"false":on-success"handleAvatarSuccess"…