微信小程序|做一个底部评论视图
2018-08-02 19:52
120 查看
使用微信小程序开发工具做一个和微信一样的评论视图:
首先我们捋一下这个视图的结构:
黑色的容器最大 包含三个横向 并列的三个红色的容器 第一个红色的容器包含两个橘色的纵向并列的容器。
这样,index.wxml文件就可以写出来了
[code]<view class="comment_release" > <view class="left"> <textarea class="text" placeholder-class="weui-input" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" auto-height="true" placeholder="评论" /> <view class="line"/> </view> <image class="emoji" src="/images/emoji.png"/> <button form-type="submit" class="submit">发送</button> </view>
对应的index.wxss文件如下
[code]/*整体样式,就是黑色的容器*/ .comment_release{ display: flex; align-items: flex-end; justify-content: space-between; box-sizing: border-box; position: fixed; left: 0; bottom: 0; width: 100%; padding: 8px 0 8px 13px; background-color: #ffffff; font-size: 12px; z-index: 999; } /**第一个红色的容器 *大概想法就是给flex-direction赋一个colomn的值,并列放置 */ .comment_release.left{ display: flex; flex-direction: column; } /*输入框*/ .comment_release .text{ width: 222px; min-height: 17px; max-height: 51px; /*最多显示三行*/ line-height: 17px; font-size: 12px; margin-bottom: 4px; margin-left: 10px; } /*线*/ .comment_release .line{ margin-bottom: 0 ; width: 222px; height: 1rpx; background-color: #4B5CD7; } /*表情图标*/ .comment_release .emoji{ width: 24px; height: 24px; line-height: 27px; margin-right: 5px; margin-left: 5px; } /*发送按钮*/ .comment_release .submit{ width: 60px; height: 27px; line-height: 27px; text-align: center; margin-right: 10px; background-color: #4B5CD7; color: #ffffff; font-size: 12px; }
到这里基本就可以获取一个相应的界面了,我们再加一个点赞和评论按钮,并且当你点击评论图标时可以获取评论框的focus
在.wxml文件中添加两个图标的代码后变成这样:
[code]<view class="tool"> <view class="tool-item" catchtap='Up' id="{{detail.id}}"> <image src="/images/like.png"/> </view> <view class="tool-item" catchtap='Comment' id="{{detail.id}}"> <image bindtap="bindReply" src="/images/comment.png"></image> </view> </view> <view class="comment_release" > <view class="left"> <textarea class="text" placeholder-class="weui-input" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" auto-height="true" bindtap="bindReply" focus="{{releaseFocus}}"placeholder="评论" /> <view class="line"/> </view> <image class="emoji" src="/images/emoji.png"/> <button form-type="submit" class="submit">发送</button> </view>
在.wxss中添加相应的格式代码:
[code].tool{ height: 64rpx; text-align: right; line-height: 64rpx; margin:20rpx 28rpx 20rpx 0; } .tool-item{ display: inline-block; vertical-align: top; margin-right: 30rpx; } .tool-item image{ height: 50rpx; width: 50rpx; }
可以看到我们在评论图标和输入框添加了事件bindReply,js文件中添加如下代码:
[code]Page({ data: { releaseFocus: false }, bindReply: function (e) { this.setData({ releaseFocus: true }) } })
我们就可以获得有响应的点赞评论区了
此文仅供学习交流使用,欢迎补充!
相关文章推荐
- 微信小程序组件1--视图容器
- 微信小程序 -- 视图层的用法
- 2.1.2微信小程序可滚动视图区域 scroll-view
- 微信小程序底部菜单详解
- 微信小程序视图层的模板 —— 微信小程序教程系列(12)
- 写了一份网页和一个相应的微信小程序
- 微信小程序开发入门第七章:收藏、评论、点赞及计数功能
- 微信小程序做一个调查问卷
- 微信小程序视图容器(swiper)组件创建轮播图
- 微信小程序 视图容器组件的详解及实例代码
- 微信小程序 (三)tabBar底部导航详细介绍
- 一个模仿 change app 的 微信小程序,展现形式类似于开眼小视频。
- 微信小程序组件解读和分析:一、view(视图容器 )
- 微信小程序视图层WXS_小程序WXS模块
- 微信小程序-视图条件渲染
- 微信小程序---底部固定导航栏tabBar
- 微信小程序 视图控件与bindtap之间的问题
- C#语言写微信小程序之visual studio+微信开发者工具写一个简单的微信小程序
- 微信小程序,学习笔记(一)框架,视图层
- 从另外一个窗体程序中控制naviswork中的视图