一、常用商品列表的换行排布

<view class="box_max"><view class="box_min">限时秒杀</view><view class="box_min">断码清仓</view><view class="box_min">品牌馆</view><view class="box_min">多多果园</view><view class="box_min">9块9特卖</view><view class="box_min">充值中心</view><view class="box_min">百亿补贴</view><view class="box_min">现金签到</view><view class="box_min">金猪赚大钱</view><view class="box_min">电器城</view>
</view><view class="shopmore"><view class="shopborder" wx:for="{{shopDate}}" wx:key="index"><image src="{{item.imgUrl}}"></image><text class="Textover">{{item.title}}</text><text class="Textcolor">¥{{item.much}}</text><text class="Textsub">¥{{item.oldMuch}}</text></view>
</view>

.box_max {display: flex;flex-wrap: wrap;
}.box_min {width: 20%;height: 50px;border: solid 1px #000;box-sizing: border-box;font-size: 14px;text-align: center;line-height: 50px;
}.shopmore {padding: 0 20rpx;display: flex;flex-wrap: wrap;
}.shopmore .shopborder {width: 50%;background-color: #fff;padding-top: 20rpx;margin-top: 20rpx;margin-right: 10rpx;margin-left: 10rpx;flex: 1;
}.shopmore .shopborder image {width: 300rpx;height: 300rpx;
}.shopmore .shopborder .Textover {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 行数 */font-weight: bold;font-size: 28rpx;
}.shopmore .shopborder .Textcolor {color: red;font-size: 30rpx;float: left;padding-left: 20rpx;
}.shopmore .shopborder .Textsub {font-size: 24rpx;color: #9e9e9e;display: inline-block;/* text-decoration:underline; //下划线 */text-decoration: line-through; /* //删除线 */
}

//index.js
const app = getApp()Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: '',shopDate: [{imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/741/112/8261211147_533971270.220x220.jpg', title: '花梨木茶桌椅组合 古典红木家具刺猬紫檀泡茶桌 实木仿古茶台', much: '469.00', oldMuch: '899.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2019/987/844/11233448789_400813907.220x220.jpg', title: '新中式功夫泡茶桌茶台整套茶室家具 马蹄脚实木茶桌椅组合可定制', much: '396.00', oldMuch: '799.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/932/318/10226813239_1341384597.220x220.jpg', title: '北欧实木床1.8米双人床主卧1.5m日式简约现代橡木小户型经济型床', much: '899.00', oldMuch: '1399.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' } ] }, })

二、常用弹窗垂直水平居中

<view class="box_F"><view class="box_S"><text>欢迎来到我的页面。。。</text></view>
</view>

.box_F {margin-top:100px;border: solid 1px #000;width: 100%;height: 500px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;
}.box_S {border: solid 1px #f0f;width: 280px;height: 80px;
}

三、列表两端对齐布局

<view class="box_LM"><view class="box_Lf"><view class="box_Ls"><text>我的钱包</text></view><text>></text></view><view class="box_Lf"><view class="box_Ls"><text>优惠券</text></view><text>></text></view><view class="box_Lf"><view class="box_Ls"><text>我的消息</text></view><text>></text></view><view class="box_Lf"><view class="box_Ls"><text>收货地址</text></view><text>></text></view><view class="box_Lf"><view class="box_Ls"><text>意见反馈</text></view><text>></text></view>
</view>

.box_Lf{font-size:14px;background-color: pink;width: 100%;height: 30px;line-height: 30px;display: flex;justify-content: space-between; /* 两端对齐 */margin-bottom: 6rpx;
}

注:以上所有内容都是自学,如果有不对的地方,还请指点,在这里谢谢了。

转载于:https://www.cnblogs.com/DreamchaserHe/p/11303576.html

微信小程序开发--常用开发实例相关推荐

  1. 微信小程序 Notes | 开发常用事例(四)

    前言 那啥,关于小程序整理了几篇笔记,多多少少对个人而言有点作用,下面附上对应的文章链接: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用 ...

  2. 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解

    微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...

  3. 「微信小程序」|开发常用事例(六)

    历史文章回顾: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用事例(三) 微信小程序 Notes | 开发常用事例(四) 微信小程序 No ...

  4. php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码

    这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将 ...

  5. php小程序开发实例,微信小程序全局配置开发实例

    本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...

  6. eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误

    1.修改入口文件 也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...

  7. 微信小程序组件库开发记录

    微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...

  8. 微信小程序image组件开发程序以及相关图片问题参考资料汇总

    微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...

  9. 微信小程序应该这样开发

    微信小程序应该这样开发 帐号相关流程 注册范围 企业 政府 媒体 其他组织(换句话讲就是不让个人开发者注册) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的 ...

  10. 微信小程序Taro + React开发实践

    微信小程序Taro + React开发实践 微信小程序原生开发有一套自己的规范和写法,开发体验十分类似Vue,但如果你想减少学习成本,那么Taro框架是一个在此基础上又封装了一层的轮子,从社区热度到开 ...

最新文章

  1. [LeetCode]Contains Duplicate III
  2. java pack unicode,汉字和Unicode码(utf-8)之间的转换(Pack/Unpack)
  3. FJUT OJ 2466 T^T的叛乱计划(组合数学)
  4. 文件上传下载—servlet API实现
  5. android shell用户界面,shell界面下安装和卸载Android应用程序(apk包)
  6. java drawimage()方法
  7. springboot图书管理怎么实现借书时间到期提醒_东和店镇第一小学图书数字化管理先进做法...
  8. 软件集成策略故事连载----构建错误是怎么来的
  9. fork 与 vfork
  10. word打出计算机图形符号,在word插入符号和特殊符号-word技巧-电脑技巧收藏家
  11. 「00后缩写黑话翻译器」登上GitHub热榜,中年网民终于能看懂年轻人的awsl
  12. 科学的软件测试培训时间是多久?
  13. 程序员最爱的 10 个在线社区,你去过几个?
  14. 制作网页所需的一些简单ps技巧
  15. [datawhale_5]图像分割二值化
  16. 重磅成果丨ASAM SOVD 1.0.0正式发布
  17. Python-Opencv fitLine 拟合直线
  18. SPR1: Spring简介
  19. 百度清风算法2.0——严厉打击欺骗下载 !
  20. 我的程序员之路:11 年高考结束到 17 年日本修士的心路历程

热门文章

  1. [淘宝经验] - HBASE在淘宝网的应用和优化小结
  2. 怎么样将摄像头视频接入到你的大屏上
  3. DOCK软件测试大乐,LeDock分子对接与虚拟筛选性能评测
  4. 使用JAF创建MIME消息
  5. 信息系统项目管理师必背核心考点(六十一)项目组合概念
  6. 赛效:如何修剪图片大小尺寸 教你在线轻松剪裁照片
  7. Glide源码阅读之模板模式2
  8. React Native UI NIKE商城
  9. 赶紧学点特种兵野外生存技巧
  10. python爬虫学习:第一章:爬虫基础