社区
黄菊华的课程社区_NO_4
微信小程序实战-企业站界面设计
帖子详情
企业站界面-首页-最新产品(1行2列流式布局)
黄菊华老师
博客专家认证
2023-01-13 00:23:04
课时名称
课时知识点
企业站界面-首页-最新产品(1行2列流式布局)
企业站界面-首页-最新产品(1行2列流式布局)
...全文
12
回复
打赏
收藏
企业站界面-首页-最新产品(1行2列流式布局)
课时名称课时知识点企业站界面-首页-最新产品(1行2列流式布局)企业站界面-首页-最新产品(1行2列流式布局)
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
相关推荐
微信小程序商城-
界面
设计实战教学(含源代码)
讲解微信小程序商城
界面
设计所需的基础知识,实战商城
界面
所要做的多个栏目:
首页
、
产品
列
表、
产品
详细页面、购物车、用户中心等几十个页面的布局设计!任务作业: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&
微信小程序商城15天从零实战视频课程-知识点-1
行
2
列
区块标题的布局
wxml代码 <!--
最新
产品
-区块标题--> <view class='text'> <view class='line_y'></view> <text>
最新
产品
</text> </view> wxss代码 /*
最新
产品
-区块标题*/ .line_y{ width: 3px; height:...
黄菊华的课程社区_NO_4
1
社区成员
414
社区内容
发帖
与我相关
我的任务
黄菊华的课程社区_NO_4
专注大学生计算机教育和毕业设计辅导
复制链接
扫一扫
分享
社区描述
专注大学生计算机教育和毕业设计辅导
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告