微信小程序--数据列表

article/2025/11/6 15:59:27

 设置页面标题

首页可以使用:

app.json中window对象的"navigationBarTitleText"参数进行标题设置,

每个页面也可以在对应json文件中使用"navigationBarTitleText"参数进行标题设置

也可以在js文件的onRead函数中使用:js中的会覆盖掉json文件中的参数

  onReady() {

    wx.setNavigationBarTitle({

      title: '购物车',

    })

  },
 

数据列表

<view class="goods-item" wx:for="{{goodsList}}" wx:key="id" ><view class="goods-img"><image src="{{item.coverImg}}"></image></view><view class="goods-info"><text class="goods-name">{{item.name}}</text><text>数量:x{{item.num}}</text><text>价格:{{item.price}}</text><text>有效期:{{item.endTime}}</text></view>
</view>

代码说明,每个商品独立展示(view),左右布局

.goods-item{

  display: flex;  // 弹性布局,使得图片和文字左右布局

  padding: 15rpx; // 距离边框(外边距)

  border: 1rpx solid #efefef; // 添加边框并设置颜色

  margin: 15rpx;   // 内边距,距离边框的间隙

  border-radius: 8rpx; // 设置圆角

  box-shadow: 1rpx 1rpx 15rpx #dddddd;  // 设置偏移量及阴影颜色

}

.goods-img image{

  height: 250rpx;  // 设置图片固定宽高

  width: 250rpx; 

  display: block; 

  margin-right: 15rpx; // 设置距离右侧内容间隙

}

.goods-info{

  display: flex;    // 弹性布局

  flex-direction: column; // 设置纵向对齐

  justify-content: space-around; // 设置横向对齐

  font-size: 24rpx; // 字体颜色

}

.goods-name{

  font-weight: bold;  // 标题加粗

}

wxs脚本使用

创建wxs结尾的文件,创建函数并共享

function filterName(str){

 // do some thing

 return str+"-我的过滤数据"

}

// 将函数共享出去

module.exports={

  filterName:filterName

}

页面调用:

// 创建wxs标签,并命名

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

// 过滤设置数据

<text class="goods-name">{{tools.filterName(item.name)}}</text>

 


http://chatgpt.dhexx.cn/article/01X1wj7s.shtml

相关文章

用小程序完成简单的详情列表功能

最近学习了微信小程序&#xff0c;写了一个详情列表 主要思路是&#xff1a; 1.先通过接口拿到数据&#xff0c;在onLoad(options){}中调用wx.request(){}函数&#xff0c;获取到数据 2.完成数据渲染后&#xff0c;&#xff0c;用catchtab给它绑定一个点击事件&#xff0c;点…

微信小程序--列表展示

小知识&#xff1a; wx:for"{{list}}"用来循环数组。 wx:for-item‘变量名&#xff08;随便起&#xff09;’ 它是指定循环数据当前的变量名&#xff0c;可以通过 {{变量名.属性}} 展示数组的元素。 wx:for-index‘变量名&#xff08;随便起&#xff09;’&#x…

vmware 下 ubuntu 双网卡设置

写在前面&#xff1a; 本文章旨在总结备份、方便以后查询&#xff0c;由于是个人总结&#xff0c;如有不对&#xff0c;欢迎指正&#xff1b;另外&#xff0c;内容大部分来自网络、书籍、和各类手册&#xff0c;如若侵权请告知&#xff0c;马上删帖致歉。 目录 step 1&#xf…

Ubuntu18.04 配置网卡

2019/10/29, Ubuntu Server 18.04 摘要&#xff1a;Ubuntu Server 18.04 采用netplan作为网络配置管理&#xff0c;修改IP使其连上网络&#xff0c;修改替换软件源 修改网卡配置# 首先使用ip a查看当前网卡名称&#xff1a; 可以看到eth0就是我们的网卡名称&#xff0c;这个要…

linux Ubuntu网卡配置,Windows 7下用VirtualBox安装Ubuntu网卡配置

Windows 7下用VirtualBox安装Ubuntu&#xff0c;要求Ubuntu能连上互联网&#xff0c;同时在Ubuntu中配置SSH、FTP、NFS服务&#xff0c;能从Win7进行访问。 此时Linux虚拟机需要两块网卡&#xff0c;一块使用NAT方式(网络地址翻译网络)连接&#xff0c;用于连接互联网&#xff…

Ubuntu 双网卡配置优先级

Ubuntu 双网卡配置优先级 作者&#xff1a;Bright Xu Ubuntu的网卡配置跟CentOS不太一样。 更多请参考&#xff1a;CentOS 双网卡配置优先级 根据业务需要&#xff0c;有时候服务器需要两张网卡&#xff0c;一张用于访问外网&#xff0c;另一种用于连接内网。 如果在安装系统是…

ubuntu配置网卡

第一步&#xff1a;查看网卡信息 输入ifconfig命令查看网卡信息&#xff0c;下图红圈处就是网卡名称。 第二步&#xff1a;配置网卡文件 注意&#xff1a;不同的linux系统&#xff0c;网卡配置文件是不同的&#xff0c;这里ubuntu的网卡配置文件是/etc/network/interfaces。 输…

Ubuntu18.04  网卡配置

Ubuntu18.04 网卡配置 Ubuntu18.04网卡配置&#xff0c;不同于其他Linux网卡配置&#xff0c;Ubuntu18.04采用的是 Netplan ,想要了解具体可查看官网。 1、设置网络为&#xff1a;桥接网卡 2、在宿主电脑上使用管理员输入CMD 命令 ipconfig /all 查看子网掩码&#xff…

ubuntu16.04配置网卡

第一步&#xff1a;查看网卡信息 输入ifconfig命令查看网卡信息&#xff0c;下图红圈处就是网卡名称。 第二步&#xff1a;配置网卡文件 注意&#xff1a;不同的linux系统&#xff0c;网卡配置文件是不同的&#xff0c;这里ubuntu的网卡配置文件是/etc/network/interfaces。 …

Ubuntu配置网卡信息(ip、网关、子网掩码、dns)

目录 一、前言二、配置网卡信息三、注意事项 一、前言 本文介绍了Ubuntu系统下配置网卡的信息&#xff0c;包含网卡的ip地址、网关、子网掩码和dns。   网卡的ip地址可以设置成动态&#xff08;DHCP&#xff09;或静态的&#xff0c;网关和掩码根据实际需求选择是否设置。dns…

idea如何用git更新和提交代码

一、git更新操作 第一步&#xff1a; 在提交项目之前必须先对项目进行更新&#xff0c;此项特别重要&#xff0c;如果不进行更新&#xff0c;别人有项目提交到服务器上&#xff0c;那么你的项目将会提交不上去&#xff0c;使用git解决冲突会比较麻烦&#xff0c;即使你解决了冲…

gitee更新代码库

步骤&#xff1a; 克隆仓库(有则省略此步) git clone https://gitee.com/master_wei/trainticketsale_fork.git 一、同步远程仓库信息 git pull origin master …

Git更新代码到本地

一.首先查看git 远程仓库的地址 git remote -v 二,更新代码本地到仓库两种方式&#xff1a; /方法一 $ git fetch origin master //从远程的origin仓库的master分支下载代码到本地的origin master$ git log -p master.. origin/master//比较本地的仓库和远程参考的区别$ git …

git强制更新本地代码,git pull无法更新本地代码,git pull显示更新成功但是本地并没有拉去到最新的代码

git pull之后看见没有&#xff0c;看见了吧&#xff0c;Already up to date. 操作了N遍&#xff0c;但是当对比本地和远程库之后&#xff0c;发现自己本地的代码根本就不是最新的&#xff0c; 怎么解决&#xff1f; 强制更新&#xff0c;将本地代码更新为仓库里最新的代码&a…

Git如何更新远程仓库代码到本地

1.首先可以暂存本地的修改&#xff0c;如果本地没有修改&#xff0c;则会显示“没有要保存的本地修改” git stash 2.执行命令会找到项目重新拉取代码进行更新&#xff0c;可以看到该程序有更新。 git fetch --all3.执行命令进行更新文件的下载覆盖&#xff0c;下面会列出哪些…

Gitee上传、更新仓库代码

Gitee上传、更新仓库代码 Gitee上传1、进入到Gitee中&#xff0c;并创建该项目的远程仓库。2、进入本地你想要上传的文件目录下&#xff0c;右键单击空白处&#xff0c;点击**Git Bash Here**。3、配置你的用户名和邮箱4、初始化本地仓库5、添加项目目录下所有文件至本地仓库6、…

git命令更新代码

拉取代码&#xff1a; git pull 推本地代码上去&#xff1a; 1、git status 2、git add [filename1] [filename2] 3、git commit [filename1] -m “提交信息说明” 4、git push 回退 1、退回至缓存区的coding回退 git reset [filename1] 2、会退到制定版本 git rese…

如何使用git更新别人的代码

文章目录 如何使用git更新别人的代码问题说明省流问题示例操作步骤总结总结 如何使用git更新别人的代码 问题说明 当自己git clone别人的代码之后&#xff0c;代码一直停留到本地电脑上&#xff0c;而你就跑了一次程序就搁置了。 后来有一天你想再次运行该代码&#xff0c;但…

更新github上的代码

昨晚熬夜写完了“git上传本地项目代码到github”的任务&#xff0c;早上来公司先把早上的工作完成后&#xff0c;抽点时间继续来继续更新文章 更新github上的代码 一、克隆代码 1、把大神的代码clone到本地&#xff0c;或者clone自己github上的代码使用命令 git clone http…

git版本如何更新

Windows中怎么更新git版本 直接在桌面右键&#xff1a;Git Bash Heregit2.17.1版本之前 &#xff1a;git updategit2.17.1版本之后 &#xff1a;git update-git-for-windows