uni-app列表开发

 时间:2026-04-24 07:20:26

1、创建一个uni-app项目 名为uniAppDemo,在该项目下的Index.vue文件中,使用view创建一个模块,如图所示

uni-app列表开发

uni-app列表开发

uni-app列表开发

2、以上view组件的style样式如下图所示 使用的是flex布局。需要了解的是flex布局中有几个属性值需要清楚

uni-app列表开发

uni-app列表开发

uni-app列表开发

uni-app列表开发

uni-app列表开发

3、flex-direction (属性决定主轴的方向)

flex-wrap (默认情况下,都排在一条线(又称”轴线”)上)

flex-flow (flex-direction和flex-wrap的缩写)

justify-content (对接方式)

align-items (属性定义项目在交叉轴上如何对齐)

align-content(属性定义了多根轴线的对齐方式)

4、然后查看运行结果

uni-app列表开发

1、之后对代码进行一个优化,把数据放在export default方法下的data中,创建一个数组来存放商品列表中的信息,并在view组件中使用v-for循环获取数据再展现到客户端上

uni-app列表开发

2、在view组件使用v-for循环获取data中的数据

uni-app列表开发

uni-app列表开发

  • 搭建动态网站环境之一:安装Apache服务器
  • 配置vmware虚拟机IP上网--使用DHCP方式
  • 虚拟机安装系统后怎么从iso文件启动
  • 笔记本无限重启
  • 联想笔记本怎样查看原来的windows密钥并更新?
  • 热门搜索
    载歌载舞的意思 谷子地将什么留在了墓碑下 艳阳天的意思 绚丽的意思 频繁的意思 什么是小太妹 车载香水什么牌子好 羽毛球鞋什么牌子好 头发少吃什么好 美联储加息是什么意思