微信小程序--数据列表

设置页面标题

首页可以使用：

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>

微信小程序--数据列表相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序数据渲染和数据请求
微信开放文档数据渲染概念:微信小程序和Vue实现理念是一致的,是基于数据驱动完成页面数据的自动化渲染.微信小程序中数据和Vue一样是响应式,即数据的更改会驱动页面进行数据的刷新. 具体操作首先找 ...
利用fiddler抓包爬取微信小程序数据
利用fiddler抓包爬取微信小程序数据 1.背景原理有些微信小程序无法在PC端进行访问原因判断非微信'内嵌浏览器',则禁止访问解决方法模拟微信'内嵌浏览器'进行访问,需要获取的数据有:Us ...
微信小程序数据助手怎么用
原文地址:http://www.wxapp-union.com/article-2360-1.html 微信小程序数据助手怎么用?数据助手是微信最新推出的一个应用,该应用主要是为了让用户能够查看自己小 ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
微信小程序新闻列表功能（读取文件、template）
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...

微信小程序--数据列表

微信小程序--数据列表相关推荐

最新文章

热门文章