微信小程序个人中心的列表控件实现代码


Posted in Javascript onApril 26, 2020

个人中心的列表控件

首先来看效果图

微信小程序个人中心的列表控件实现代码

wxml

<view class="list-item">
 <image class="item-image" src="../images/fuwu.png"></image>
 <text class="item-text">我的收藏</text>
 <image class="image-jiantou" src="../images/jiantou.png"></image>
 </view>
 <view class="line"></view>

wxss

.list-item {
 display: flex;
 flex-direction: row;
 align-items: center;
 width: 100%;
 height: 80rpx;
 margin-top: 10rpx;
 position: relative; /*父元素位置要设置为相对*/
}

.item-image {
 width: 50rpx;
 height: 50rpx;
 margin: 20rpx;
}

.item-text {
 color: gray;
 font-size: 35rpx;
 margin-left: 20rpx;
}

.image-jiantou {
 width: 20rpx;
 height: 35rpx;
 position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
 right: 0; /* 靠右调节 */
 margin-right: 35rpx
}

.line {
 width: 100%;
 height: 3rpx;
 background: lightgray;
 margin-left: 90rpx;
}

到此这篇关于微信小程序个人中心的列表控件实现代码的文章就介绍到这了,更多相关微信小程序个人中心内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 #Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 #Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 #Javascript
jquery检测上传文件大小示例
Apr 26 #jQuery
element中的$confirm的使用
Apr 26 #Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 #Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 #Javascript
You might like
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
图解javascript作用域链
2019/05/27 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
美德好少年事迹材料
2014/01/19 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
出纳岗位职责
2015/01/31 职场文书
小学推普周活动总结
2015/05/07 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书