今天好冷,躲在客厅瑟瑟发抖的学习小程序。先看一下效果图↓
准备工作:在pages目录下新建一个wxss2文件夹,并在app.json中进行注册,会自动生成wxss.js等四个文件。
(1)container & list-container
(3)最外层view的效果图
2.一个item的编写
可以结合两张图片,理解view对应的部分,在这里不一一说明,贴上wxss的代码↓
①list-item和right样式中,决定其包裹的内容水平分布
②title样式中,决定其包裹的内容竖直分布↓
此外,flex:1表示按照分布方式剩余的空间都分配给title。如该例中,right宽度为590rpx,time的宽度为200rpx,因此title的宽度为590-200=390rpx; 3.多个item项的编写,我们需要在js文件中定义一个数组contactList↓
修改wxml中部分代码, 循环访问数组↓,可以得到最开始的效果图。
就记录到这里啦~ 晚安。 |
微信小程序框架wxss--电话列表展示demo
发布:2018-05-02 15:15浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08