1、wxml
<view class='accessWrapper'>
<view class='title'>
评价
<view class='starsWrapper'>
<block wx:for="{{stars}}">
<image class="star-image" style="left: {{item*50}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
<view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
<view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
</image>
</block>
</view>
</view>
<!-- 这里绑定是bindInput而不是bindtab -->
<textarea bindinput='textAreaCon' placeholder='写点什么吧...' auto-focus='true'></textarea>
<view class='uploadFile' bindtap='upload'>+</view>
</view>
<button type='submit' bindtap='saveAccess' class='save-edit'>提交保存</button>
okaychen
2、wxss
page{
background: #f5f5f5;
}
.accessWrapper{
background: #fff;
font-size: 14px;
padding-bottom: 10px;
}
.accessWrapper textarea{
width: 94%;
margin: 0 auto;
max-height: 200px;
border-top: 1px solid #f5f5f5;
padding: 10px 0px;
}
.accessWrapper textarea::-webkit-scrollbar{
width: 0px;
height: 0px;
color: transparent;
}
.accessWrapper .title{
padding: 10px;
}
.starsWrapper{
position: absolute;
top: -20px;
right: 135px;
}
/* stars */
.star-image {
position: absolute;
top: 50rpx;
width: 50rpx;
height: 50rpx;
src: "../../../image/normal.png";
}
.item {
position: absolute;
top: 0rpx;
width: 50rpx;
height: 50rpx;
}
.uploadFile{
width: 50px;
height: 50px;
border: 1px solid #f5f5f5;
color: #999;
text-align: center;
line-height: 50px;
font-size: 20px;
margin-left: 10px;
}
okaychen
3、js
var app = getApp()
Page({
data: {
stars: [0, 1, 2, 3, 4],
normalSrc: '../../../image/normal.png',
selectedSrc: '../../../image/selected.png',
halfSrc: '../../../image/half.png',
key: 1,//评分
path: ' ',
userInput:' '
},
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
})
},
upload: function () {
var that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: function (res) {
var data = res.data
wx.showModal({
title: '上传文件返回状态',
content: '成功',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
}) //do something
},
fail: function (res) {
console.log(res)
}
})
that.setData({
path: tempFilePaths
})
}
})
},
textAreaCon:function(e){
var that = this;
that.setData({
userInput: e.detail.value,
})
},
saveAccess:function(e){
if(this.data.userInput == ' '){
wx.showModal({
title: '提示',
content: '对不起,请输入留言内容',
})
}else{
console.log(this.data.userInput);
// 成功监听用户输入内容
}
}
})
okaychen
实例3:自定义底部弹出层
自定义底部弹出层,在电商的小程序中经常会用到,根据需要自定义弹出内容,先看下我的效果