企业官网小程序搭建教程-首页的搭建03
2022/1/7 20:03:53
本文主要是介绍企业官网小程序搭建教程-首页的搭建03,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
01 总体介绍
02 首页搭建第一部分
03 首页搭建第二部分
上一节我们开发了导航的功能,本节我们开发应用场景功能
应用场景有个向左滑动的效果,因此会用到滚动容器组件
打开首页,往里增加一个普通容器
输入如下样式
width: 710px; height: 316px; background: rgb(255, 255, 255); margin-left: 20px; padding-left: 40px; border-radius: 16px
往里增加一个普通容器用来显示我们的标题
输入如下样式
height: 44px; display: inline-block; margin-top: 24px; margin-bottom: 38px
往里添加一个文本组件
输入如下样式
height: 44px; font-size: 32px; font-weight: bolder; white-space: pre-line
在标题下边增加个滚动容器
增加如下样式:
overflow-x: auto; overflow-y: hidden; height: 210px; display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap
往里边添加一个普通容器
样式设置如下:
width: 240px; height: 170px; display: inline-block; flex: none; margin-top: 10px; background: undefined repeat-x; margin-right: 16px; border-radius: 16px; background-size: 100% 100%
然后给该组件绑定循环变量
绑定如下:
然后给组件绑定样式
里边再添加一个普通容器
添加如下样式:
margin-top: 54px; margin-left: 24px
里边添加一个文本组件
添加如下样式
color: #0F62FE; font-size: 32px; font-weight: normal; white-space: pre-line
然后绑定变量,绑定为循环变量的title
在文本组件的同级添加一个普通容器,往里添加一个文本组件
设置如下样式
white-space: pre-line; color: rgb(135, 141, 150); font-size: 24px
最后的效果
这篇关于企业官网小程序搭建教程-首页的搭建03的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享