【小程序】通过for循环实现Js数据的前台调用(商品列表示例)
2023-09-11 14:15:10 时间
1、 list.wxml
<!--pages/index/list.wxml-->
<!-- <text></text> -->
<view class="row" wx:for="{{listObj}}" wx:key="*this" >
<view class="pic">
<image src="../images/{{item.img}}.jpg"></image>
</view>
<view class="text">
<view class="title">
{{item.title}}
</view>
<view class="time">
{{item.time}}
</view>
</view>
</view>
2、list.wxss
/* pages/index/list.wxss */
.row{display:flex;margin-top: 20rpx;margin-left: 20px;}
.pic{flex:2}
image{width:100%;height:150rpx;border-radius: 5px;}
.text{flex:8;padding-left: 20rpx; display: flex;flex-direction: column;}
.title{flex:7;font-size: 18px;}
.time{flex:4;color:rgb(182, 180, 180)}
3.list.js
// pages/index/list.js
Page({
/**
* 页面的初始数据
*/
data: {
listObj: [
{ "title": "乾隆牌 - 帝王耳机", "time": "2022-01-04", "img": "b1" },
{ "title": "李世民牌 - 帝王耳机", "time": "2022-01-03", "img": "b2" },
{ "title": "秦始皇牌 - 帝王耳机", "time": "2022-01-01", "img": "b3" }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
相关文章
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(Bootstrap.js)实现简单的轮播图
- JS - 获取页面滚动的高度
- [AWS Lambda] Convert a Express node.js app to serverless
- [Node.js] Mock an API for Local Development in React with Mirage JS
- node.js中的事件循环机制
- 关于JS中的constructor与prototype
- 如何使用微信JS-SDK实际分享功能
- [Node.js] process.nextTick for converting sync to async
- QRCode.js:使用 JavaScript 生成二维码
- js工具方法
- kbone 高级 - 自定义 app.js 和 app.css
- SAP UI5的Component-preload.js是啥时候加载的
- Atitit 搜索蓝牙设备 powershell的实现 java noede.js python 先用脚本语言python nodejs,不好实现。。Java 也不好实现。。 Netcore可以,
- paip.最好的脚本语言node js 环境搭建连接mysql
- 原生js实现随机验证码HTMl-JS
- 〖大前端 - 基础入门三大核心之JS篇②〗- 掌握 Javascrip 的基础语法
- 小白必看!JS中循环语句大集合
- js 事件循环中宏任务和微任务执行顺序
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- 移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决
- JS中arr.forEach()如何跳出循环
- JS中的事件监听
- js循环判断的方法
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- js判断输入的全是空格
- JS工具方法 3 js客户端与php服务器通信加密之AES