小程式實現五星點評
先看一下效果圖:
如上圖所示,這裡我們要新增三個五星點評。
我們這裡之講解一下,“描述相符”的點評
WXML程式碼
<!--星星評價-->
<view class="comment1-description" style="display:flex;flex-direction:row;">
<view class="comment1-description1">描述相符</view>
<view class="star-pos" style="display:flex;flex-direction:row;" >
<view class="stars {{flag0>=1? 'on': ''}}" bindtap="changeColor1"></view>
<view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view>
<view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view>
<view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view>
<view class="stars {{flag0>=5? 'on': ''}}" bindtap="changeColor5"></view>
</view>
</view>
JS程式碼
Page({
data:{
flag:0
},
changeColor1:function(){
var that = this ;
that.setData( {
flag: 1
});
},
changeColor2:function(){
var that = this;
that.setData( {
flag:2
});
},
changeColor3:function(){
var that = this;
that.setData( {
flag: 3
});
},
changeColor4:function(){
var that = this;
that.setData( {
flag:4
});
},
changeColor5:function(){
var that = this;
that.setData( {
flag: 5
});
},
WCSS程式碼
/*星星的樣式*/
.stars{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
margin-left: 40rpx;
}
.on{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/[email protected]");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
/*margin-left: 10px;*/
}
相關推薦
小程式實現五星點評
先看一下效果圖: 如上圖所示,這裡我們要新增三個五星點評。 我們這裡之講解一下,“描述相符”的點評 WXML程式碼 <!--星星評價--> <view clas
小程式實現 點選加入購物車 紅點拋物線飄入
1:實現效果; 2:index.wxss //只寫紅點樣式 .good_box { width: 30rpx; height: 30rpx; position: fixed; border-radius: 50%; overflow: hidden
小程式 - 實現滾動文字
小程式 - 實現滾動文字 截圖: index.wxml 檔案 <!--index.wxml--> <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interva
小程式 - 實現【一鍵複製】功能
小程式 - 實現【一鍵複製】功能 為啥想起使用【一鍵複製】功能?因為個人小程式裡,不許加外連結,很是頭疼,就想到一鍵複製連結,這是我剛寫的一個減一的小程式: 使用【一鍵複製】: wxml 檔案: <view> 官網:<text selectable='true' bin
微信小程式實現與後臺PHP互動
微信小程式實現與後臺PHP互動 接下來將講後臺如何與前臺進行資料及圖片之間的互動,相信這一點是很多人所關注的,因為當時我實在團隊中負責後臺開發,因此對前端不是特別瞭解,這裡我會貼出前端開發時的部分程式碼截圖,微信小程式的官方api介紹地址是: https://mp.weix
小程式實現星級打分
效果圖 wxml <view > <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*100}}rpx" src="{{key > item
小程式實現上拉載入,例項程式碼
小程式實現上拉載入,例項程式碼 最近在做一個小程式,想實現下拉重新整理的功能,剛開始就遇到了一個尷尬的問題,原因是不認真o(╥﹏╥)o 下面是通過摸索總結出的步驟,給尋找問題的同伴提供參考: 下拉重新整理分為全域性和單頁面的: 全域性的設定就是在 app.js 中的 Windows
微信小程式實現倒計時計時器
微信小程式驗證碼倒計時*秒 var timer = setInterval(function () { lastTime--; that.setData({ codeText:
微信小程式實現驗證碼倒計時效果
效果圖 wxml <input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='i
小程式實現多圖上傳、預覽
wxml <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd
小程式實現跑馬燈效果
跑馬燈效果比較常見,一般做電商類的小程式都會使用到; 跑馬燈效果的製作 製作方式很簡單,先方上程式碼,後面會對程式碼詳細講解 一、wxml介面的實現 <view class="example"> <view class="marquee_box">
微信小程式實現星星評價效果
程式碼實現 wxml檔案 ? 1 2 3
微信小程式實現點贊、取消點贊功能
最近接觸到小程式,發現很有意思,在專案中遇到了一點小問題,就是點贊+取消點贊有些衝突,還有就是多項的點選,話不多說咱們直接上程式碼! 效果圖 wxml ? 1
微信小程式實現模組
.container{ background-color: white; margin: 10rpx 20rpx 10rpx 20rpx; -moz-box-shadow: 2rpx 2rpx 5rpx #969696; -webkit-box-shadow: 2rpx 2rpx 5
微信小程式實現滾動載入更多
微信小程式實現滾動載入更多 1.需要用到的元件和api scroll-view(可滾動檢視區域) wx.showToast(OBJECT)顯示訊息提示窗 2.需要用到的屬性
微信小程式實現顯示和隱藏控制元件-頭像-取值-bindblur事件
微信小程式實現顯示和隱藏控制元件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: b
小程式實現textarea行數自動增加
查詢網上案例很多,但是都不是很滿意,參考大牛案例終結了一下,話不多說程式碼如下: 實現效果: 前段程式碼 <view class="text-box"> <view>{{currentInput
基於Electron + nodejs + 小程式 實現彈幕小工具(開篇)
前言 彈幕(barrage),中文流行詞語,指的是在網路上觀看視訊時彈出的評論性字幕。類似小說中行間彰顯的夾批,視訊中屏間飄過的評點叫做彈幕,原意指用大量或少量火炮提供密集炮擊。而彈幕,顧名思義是指子彈多而形成的幕布,大量吐槽評論從螢幕飄過時效果看上去像是飛行射擊遊戲裡的彈幕。 很久以前,彈幕還
基於Electron + nodejs + 小程式 實現彈幕小工具(上篇)
前言 上一篇文章,大概講述我們即將要做的彈幕小工具是什麼樣的,將使用什麼樣的技術。那麼,從這一篇開始,我們將一步步把想法落地成程式碼。本文,我們將使用Electron實現接收端,讓我們的彈幕飛起來。 效果圖 如上圖所示,把放映PPT的同時,使用者可以通過掃描小程式二維碼,實時發表自己的
微信小程式實現輪播圖
swiper的相關屬性 indicator-dots 是否顯示小圓點,也可以自己重新設定小圓點 circular 是否銜接滑動,就是實現無限滾動 previous-margin 與上一張圖片的間距 next-margin 與下一張圖片的間距 autoplay 實現自動滾