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


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 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP中其实也可以用方法链
2011/11/10 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
编写Python的web框架中的Model的教程
2015/04/29 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Linux的主要特性
2016/09/03 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
家庭困难证明
2014/10/12 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
windows系统安装配置nginx环境
2022/06/28 Servers