社区
黄菊华的课程社区_NO_4
微信小程序实战-企业站界面设计
帖子详情
企业站界面-首页-最新产品(1行2列流式布局)
黄菊华老师
博客专家认证
2023-01-13 00:23:04
课时名称
课时知识点
企业站界面-首页-最新产品(1行2列流式布局)
企业站界面-首页-最新产品(1行2列流式布局)
...全文
35
回复
打赏
收藏
企业站界面-首页-最新产品(1行2列流式布局)
课时名称课时知识点企业站界面-首页-最新产品(1行2列流式布局)企业站界面-首页-最新产品(1行2列流式布局)
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
微信小程序商城-
界面
设计实战教学(含源代码)
讲解微信小程序商城
界面
设计所需的基础知识,实战商城
界面
所要做的多个栏目:首页、
产品
列
表、
产品
详细页面、购物车、用户中心等几十个页面的
布局
设计!任务作业:1.制作一个空白的小程序框架2.制作一个1
行
2
列
的
产品
列
表3.制作一个
产品
介绍的底部菜单:首页,收藏,购物车,加入购物车,立即购买(注意: 作业需写在CSDN博客中,请把作业链接贴在评论区,老师会定期逐个批改~~)
9.1.3
最新
产品
界面
开发
企业
站
uni-app实战【uni-app教程uniapp教程(黄菊华-跨平台开发系
列
教程)】
9.1.3
最新
产品
最新
产品
区块效果如图9-4。
布局
分析:
最新
产品
区块的标题我们使用公司简介的代码,区块标题的样
式
是公用的;
产品
显示区块,我们这里做一个1
行
2
列
的
流
式
布局
,也就是我们每个
产品
的内容占据整个手机宽度的50%,那么1
行
就可以放2个
产品
了。 注意:我们每个
产品
的图片image中添加属性 mode=‘widthFix’ ,表示图片高度自动随图片高度自适应按比例变化。
布局
代码如下: <!--
最新
产品
(1
行
2
列
流
式
布局
) 开始--> <view class='cp_zuixi
9.2.3 右侧
产品
产品
列
表
界面
开发
企业
站
uni-app实战【uni-app教程uniapp教程(黄菊华-跨平台开发系
列
教程)】
9.2.3 右侧
产品
我们本小节来填充(虚线框起来部分)右侧
产品
列
表,如图9-10。
布局
分析:1
列
2
列
的
流
式
布局
。
布局
代码如下: <!--右侧
产品
(1
行
2
列
流
式
布局
) 开始--> <view class='cp_zuixin'> <navigator url='' class='cp-xiangmu'> <image src='/static/tupian/cp01.jpg' class='cp_tupian' mode='widthFix'
9.1.4
最新
案例
界面
开发
企业
站
uni-app实战【uni-app教程uniapp教程(黄菊华-跨平台开发系
列
教程)】
9.1.4
最新
案例
最新
产品
区块效果如图9-5。
布局
分析 :每个
产品
分1
行
2
列
,左侧1
列
放
产品
图片,右侧一
列
放
产品
是文字信息;右侧的一
列
然后分3
行
放不同的
产品
文字信息。 注意:我们每个
产品
的图片image中添加属性 mode=‘widthFix’ ,表示图片高度自动随图片高度自适应按比例变化。
布局
代码如下 <!--
最新
案例-区块标题--> <view class='qukuai'> <view class='qukuai-shuxian'></view&
9.1.1 广告图
界面
开发
企业
站
uni-app实战【uni-app教程uniapp教程(黄菊华-跨平台开发系
列
教程)】
本章节主要讲解
企业
站
项目
界面
的制作,主要包括以下页面:首页、
产品
列
表和
产品
详情、案例
列
表和案例详情、资讯
列
表和咨询详情、关于我们、留言反馈页面。 9.1
企业
站
首页
企业
站
项目首页主要包括下面几个模块:广告图、公司简介、
最新
产品
、
最新
案例、
最新
资讯。首页效果如图9-1。 9.1.1 广告图 首页广告图的最终效果如图9-2.
布局
代码如下: <!--首页-广告图--> <view class='ad01'> <image src='/static/tupian/01
黄菊华的课程社区_NO_4
1
社区成员
414
社区内容
发帖
与我相关
我的任务
黄菊华的课程社区_NO_4
专注大学生计算机教育和毕业设计辅导
复制链接
扫一扫
分享
社区描述
专注大学生计算机教育和毕业设计辅导
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章