欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 小程序评论框实现

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

小程序评论框实现

发布时间:2020-12-23  

wxmlview class="talk" bindtap="bindReply"回复/viewview class="release" hidden="{{!releaseFocus}}" textarea class="text" placeholder-class="input_null" fixed="true" maxlength="-1&qu

 

 

 

wxml

 

<viewclass="talk"bindtap="bindReply">回复</view>

 

<viewclass="release"hidden="{{!releaseFocus}}">

<textareaclass="text"

placeholder-class="input_null"

fixed="true"

maxlength="-1"

show-confirm-bar="false"

cursor-spacing="15"

auto-height="true"

focus="{{releaseFocus}}"

placeholder="回复 {{releaseName}}"></textarea>

<viewclass="submit">发送</view>

</view>

wxss

 

.input_null{

color:#C9C9C9;

}

 

.release{

display: flex;

align-items: flex-end;/*底部对齐*/

justify-content: space-between;/*两端对齐*/

box-sizing: border-box;

position:fixed;

left:0;

bottom:0;

width:100%;

padding:18rpx018rpx30rpx;

background-color:#F7F8F7;

font-size:28rpx;

z-index:999;

}

.release .text{

width:604rpx;

min-height:34rpx;

max-height:102rpx;/*最多显示三行*/

border-width:15rpx20rpx;/*使用padding与预期留白不一致,故使用border*/

border-style: solid;

border-color:#ffffff;

line-height:34rpx;

font-size:28rpx;

background-color:#ffffff;

border-radius:4rpx;

}

.release .submit{

width:116rpx;

height:64rpx;

line-height:64rpx;

text-align: center;

color:#66CC00;

}

js

 

Page({

/**

* 页面的初始数据

*/

data:{

releaseFocus:false,

},

/**

* 生命周期函数--监听页面加载

*/

onLoad:function(options){

 

},

/**

* 点击回复

*/

bindReply:function(e){

this.setData({

releaseFocus:true

})

}

本文标签

: