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


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的最佳方法分享
Oct 21 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
javascript连续赋值问题
2015/07/08 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
小车司机岗位职责
2013/11/25 职场文书
生产总经理岗位职责
2013/12/19 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
预备党员群众意见
2015/06/01 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript