微信小程序|做一个底部评论视图
使用微信小程序开发工具做一个和微信一样的评论视图:
首先我们捋一下这个视图的结构:
黑色的容器最大 包含三个横向 并列的三个红色的容器 第一个红色的容器包含两个橘色的纵向并列的容器。
这样,index.wxml文件就可以写出来了
<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文件如下
/*整体样式,就是黑色的容器*/
.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文件中添加两个图标的代码后变成这样:
<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中添加相应的格式代码:
.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文件中添加如下代码:
Page({data: {releaseFocus: false},bindReply: function (e) {this.setData({releaseFocus: true})}
})
我们就可以获得有响应的点赞评论区了
此文仅供学习交流使用,欢迎补充!
微信小程序|做一个底部评论视图相关推荐
- 微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个 标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
- 微信小程序做一个调查问卷
用微信小程序做了一个调查问卷 功能描述: 用户一天只能进行一次问卷调查=>用户登录功能 获取用户意见信息 题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项 多选题选择个数设置 ...
- 微信小程序做一个调查问卷(二)
即将不定期的开放代码 核心代码呈现 源码下载 在微信小程序如何展示富文本编辑器设置的内容 多使用缓存技术,防止过多无效的访问 题目分为单选题.多选题.简答题 设置有其他选项,可进行手动输入选项 多选题 ...
- 使用微信小程序做一个简易的下拉框,无动画效果,纯原生写法(下拉列表框)
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
- 微信小程序做一个文档预览
文档预览 首先展示效果 js页面 wxml页面 首先展示效果 图片预览: 视频预览 js页面 首先在data中定义变量 itemId:null,saveTopList:[],//存储顶层文件列表fol ...
- 微信小程序 | 做一个小程序端的扫雷游戏
- 微信小程序开发学习4(视图与逻辑)
微信小程序开发学习4(视图与逻辑) 1.学习目标 能够知道如何实现页面之间的导航跳转 能够知道如何实现下拉刷新效果 能够知道如何实现上拉加载更多效果 能够知道小程序中常用的生命周期函数 2.页面导航 ...
- 微信小程序做问卷——前端部分(生成问卷)
文章目录 实现效果 界面功能 数据功能 各个组件的实现 右上角的蓝色加号 问卷结构部分 以单选部分举例 每个题型的灰色加号 每个题型的删除按钮 每个选项的删除按钮 每个输入的数据记录 全部代码 que ...
- 微信小程序,一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
最新文章
- 让你的VB6.0支持滚轮操作
- 禁止复制的网页怎么复制
- 类加载器-双亲委派-源码分析2
- 阿里妈妈应用系统大规模异步交互治理方案
- .NET 程序员如何学习Vue
- 1.0jpa 2.0_JPA 2.1如何成为新的EJB 2.0
- Java StringBuilder codePointAt()方法与示例
- 数据结构 二叉搜索树BST的实现与应用
- Automatic Updates服务无法启动
- [kuangbin带你飞]专题四 最短路练习
- JS基础知识大总结史上最全(已完结~)
- IMU与GPS传感器ESKF融合定位
- http 503 service
- python2.7实现简单日记本,兼容windows和linux
- 钢丝流-BISU的战斗哲学
- vim菜单栏不正常显示以及隐藏菜单栏
- 雷电3菊链功能_雷电三接口小科普,看完再说你是否需要雷电三!
- Java之美[从菜鸟到高手演变]之字符串
- 在打印服务器中新增纸张规格后,在打印机首选项中的自定义纸张中看不到的原因
- 快速搜索随机树(RRT---Rapidly-exploring Random Trees)入门及在Matlab中演示