2. 程式人生 > >小程序中如何實現評論中的點亮星星

小程序中如何實現評論中的點亮星星

阿新 • • 發佈：2019-04-12
relative normal img contents -o overflow nbsp UNC fim

方案一：

wxml部分：

<!-- 點亮星星 --> <view class=‘stars‘> <view class=‘contents‘> <view wx:for="{{stars}}" wx:key="" style=‘background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;‘ data-index="{{index}}" bindtap=‘scores‘></view>
 </view> </view> wxss部分： .stars{ width:100%; display: flex; height: 40rpx; box-sizing: border-box; position: relative; } .contents{ width:100%; display: flex; box-sizing: border-box; position: relative; } .contents:last-of-type{ height: 40rpx; } .contents:last-of-type view{
 width: 42rpx; height: 42rpx; margin-right: 15rpx; background-size: 100% 100%; } JS部分： // 點亮星星的基礎數據 stars: [ { flag: 1, bgImg: "http://wximg.youtasc.com/star.png", bgfImg: "http://wximg.youtasc.com/f_star.png" }, { flag: 1, bgImg: "http://wximg.youtasc.com/star.png",
 bgfImg: "http://wximg.youtasc.com/f_star.png" }, { flag: 1, bgImg: "http://wximg.youtasc.com/star.png", bgfImg: "http://wximg.youtasc.com/f_star.png" }, { flag: 1, bgImg: "http://wximg.youtasc.com/star.png", bgfImg: "http://wximg.youtasc.com/f_star.png" }, { flag: 1, bgImg: "http://wximg.youtasc.com/star.png", bgfImg: "http://wximg.youtasc.com/f_star.png" } ], // 點亮星星的事件部分 scores: function (e) { var that = this; for (var i = 0; i < that.data.stars.length; i++) { var allItem = ‘stars[‘ + i + ‘].flag‘; that.setData({ [allItem]: 1 }) } var index = e.currentTarget.dataset.index; for (var i = 0; i <= index; i++) { var item = ‘stars[‘ + i + ‘].flag‘; that.setData({ [item]: 2 }) } } 方案二：（缺陷：目前我還沒想到如何實現動態的效果） wxml部分： <!-- 點亮星星 --> <view class=‘shop-star‘> <view class=‘star-after‘>★★★★★</view> <view class=‘star-before‘ >★★★★★</view> </view> wxss部分： .shop-star{ font-size: 50rpx; display: flex; position: absolute; } .star-after{ font-size: 50rpx; color: #e2e2e2; } .star-before{ position: absolute; color: #f19e38; width: 90%; overflow: hidden; } 方案三： wxml部分： <block wx:for="{{sumelist}}" wx:key=""> <image class=‘comment-icon‘ src=‘{{item.url}}‘ /> </block> <!-- 評論星級、空心 --> <block wx:for="{{sumeList}}" wx:key=""> <image class=‘comment-icon‘ src=‘{{item.Url}}‘ /> </block> wxss部分: .comment-icon{ width: 30rpx; height: 30rpx; display: inline-block; } js部分： sumelist:[ { id:0, url:‘img/star.png‘, }, { id:1, url: ‘img/star.png‘, }, { id: 2, url: ‘img/star.png‘, }, { id: 3, url: ‘img/star.png‘, }, { id:4, url: ‘img/star.png‘, }, ], sumeList:[ { id:0, Url:‘img/starg.png‘, }, { id:1, Url: ‘img/starg.png‘, }, { id: 2, Url: ‘img/starg.png‘, }, { id: 3, Url: ‘img/starg.png‘, }, { id:4, Url: ‘img/starg.png‘, }, ],

小程序中如何實現評論中的點亮星星

相關推薦

小程序中如何實現評論中的點亮星星

relative normal img contents -o overflow nbsp UNC fim 方案一： wxml部分： <!-- 點亮星星 --> <view class=‘stars‘> <view class

小程序中搜索文字高亮顯示

get 請求 高亮 current length split NPU primary box 小程序對解析標簽字符串不友好，有時候要處理一些搜索內容、關鍵字、段落中高亮展示檢索到的匹配文字就會比較麻煩。 [HTML] <view class="section

微信小程序中循環輸出標簽寫法

註意 lis -1 logs first wid fix 循環 技術 <view wx:for="{{index_first_list}}"> wx:for中是數組名 在js中data裏面添加數組的值，註意數組的寫法。 調用數組裏面的值默認用item，例如：

微信小程序UI------實現攜程首頁頂部的界面（彈性布局）

app clas 點擊下載 技術 使用 css .html 攻略 enter 今天寫了一個攜程界面的UI，利用H5的彈性盒子來實現，學過H5彈性盒子的，來看是比較方便的，因為CSS代碼都差不多。 可以看看這篇博客 快速使用CSS 彈性盒子 效果圖如下： 　　 主要是攜程首頁

在Android應用程序中實現推送通知

xamarin android 幾乎每一個應用程序的一個重要特性是支持推送通知的能力。使用推送通知，您可以更新用戶，而不需要應用程序在任何時候運行或輪詢服務器， 避免潛在的電池電量不足。 隨著火力點雲信息的介紹（FCM），谷歌使得在Android應用程序中實現推送通知變

微信小程序中target與currentTarget

message 渲染 console cat 綁定 har nload bind area 如有錯誤，請糾出，大家一起進步!!! 　　target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。但事件流處於目標階段，target與current

微信小程序中公用內容

哪裏 nbsp ren 暴露 log targe import func require 微信小程序中各個頁面調用公用的js 在util.js文件中 // 跳轉哪裏 function go(where) { wx.reLaunch({ url: where,

實戰分享，教你藍牙在小程序中的應用

success 查詢 notify 用戶 等待 apt service() 傳遞數據 length 歡迎大家前往騰訊雲技術社區，獲取更多騰訊海量技術實踐幹貨哦~ 作者：朱勝 導語 藍牙在日常生活中廣泛使用的一項技術，小程序給了我們前端工程師一個控制藍牙的方法

微信小程序之實現slideUp和slideDown效果

frame nbt set 阻止 fix absolut 動畫效果 ole nsf 怎樣實現jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY（）屬性，給需要動畫的元素添加上一個動畫class。 先

微信公眾號中跳轉到小程序中，通過api

log ini post 推送 打開 key 配置 media 二級菜單 參數是否必須說明button是一級菜單數組，個數應為1~3個sub_button否二級菜單數組，個數應為1~5個type是菜單的響應動作類型，view表示網頁類型，click表示點擊類型，mini

微信小程序中不同頁面間的參數傳遞

-c temp 用戶 tlist emp 跳轉 Coding 響應 小程序 從樣式頁面WXML向邏輯頁面JS傳遞點擊事件的響應函數中傳遞參數 1 <!--此為樣式頁面--> 2 <block wx:for="{{postList}}" wx:for-

小程序中的block

包含 標簽 pan col item style nbsp 一次 clas <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。 因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標

微信小程序中的循環遍歷問題

.sh success show code 我們 log ast ons 小程序 比如：如果在微信小程序中要遍歷輸出 0-9 的數，我們會使用for循環 for(var i=0;i<10;i++){ console.log(i); } 確實結果

微信小程序錄音實現

img ioc start 進行 網絡請求失敗 UNC 播放音頻 toa num 最近在寫一個小程序（原創詩詞平臺，名字叫作“詩人呀”）的功能，需求是需要把用戶的錄音記錄並上傳到服務器，然後調用接口來實現播放功能。 翻閱不少資料都發現小程序對

小程序中的setData的使用

nor function 小程序 name field .data alt mod 圖層 小程序中的setData setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。 直接修改 this.data 而不調用 thi

ThinkPHP 5.0開發微信小程序商場實現全棧項目架構

PHP 微信 第1章 前言：不同的時代，不同的Web我們說，做一個產品，真的只是做一個產品嗎？恐怕不是。現代的Web產品是一個產品矩陣，需要有良好的服務器端架構來支撐整個產品體系。本小節，我們將對現代Web體系做一個介紹，並對課程所需要學習的知識點有一個初步的了解。第2章 環境、工具與準備工作工欲善其

小程序中的支付以及回調

servlet _id 三個點 body public new receive code rep 　　小程序支付的簡易流程圖，直接參考官網的文檔和Domo就可以做出來，這裏簡單說明一下，支付總的來說分為兩步，第一步：調用統一下單接口，獲取prepay_id等參數，簽名後返回

Android程序中實現中英文切換

等等 andro director 選擇 單詞 and 之前 rect local 一開始項目沒有考慮到英文切換這是一個很不好的開始。等到項目基本完成之後才意識到要中英文都支持。 最好是在項目開始之前規劃好UI布局等等，畢竟一個英文單詞的占空比漢字要長的很多，最後填英文的

微信小程序如何實現自定義tabBar

type pos use 如何 轉載 url avi float 工作 小程序開發現在非常火，但是對於後臺來說如何做到自定義tabBar呢?下面就來講解下，如何實現微信小程序登錄後根據用戶身份權限不同跳轉到不同的頁面問題。首先需要解決的是：你要把底部導航做成一個公共模板te

小程序中的路由跳轉

demo 拼接 prop load file 文件 value his title 1.最簡單是tabBarapp.json中：pages裏面要聲明，在tabBar裏面同樣操作，因為是JSON文件，所以所有內容都是字符串{ "pages": [ "pages/ind