微信小程序发布列表页面处理
wxml: <!--pages/good_index/good_index.wxml--> <view class='list'> <block wx:for='{{info}}' wx:key='list' wx:for-item="item"> <view class="list_item"> <!-- <navigator url='details?id={{item.goods_id}}'> --> <view class='img'> <image src="/pages/img/1.jpg" mode="scaleToFill"/> </view> <view class='info'> <view class='title'>商品名称:{{item.title}}</view> <view class='price'>商品价格:¥{{item.price}}</view> <view class='num'>商品销量:{{item.type }}</view> <view class='nums'>商品属性:{{item.type }}</view> </view> </view> </block> </view>
wx.ss
/* pages/good_index/good_index.wxss */ .clear{ clear: both; overflow: hidden; } navigator{ display:inline; } .list{ margin-top:10px; } .list .list_item{ margin-top:10px; padding:10px; height:100px; border-bottom:1px solid #E8E8E8; } .list .list_item .img{ float:left; width:40%; height:100%; } .list .list_item .img image{ width:100%; height:100%; } .list .list_item .info{ width:59%; float:right; height:100px; position:relative; } .list .list_item .info .title{ color:#333; margin-left:10px; font-size: 15px; } .list .list_item .info .price{ color:#FF2727; margin-left:10px; margin-top:10px; font-size:15px; } .list .list_item .info .num{ position: absolute; left:0px; bottom:10px; color:#747474; margin-left:10px; font-size:15px; } .list .list_item .info .nums{ position: absolute; left:0px; bottom:10px; color:#747474; margin-left:10px; font-size:15px; }
wx.js
// pages/good_index/good_index.js Page({ /** * 页面的初始数据 */ data: { info:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ url: 'http://www.yan.com/api/xcx/goodIndex', //仅为示例,并非真实的接口地址 header: { 'content-type': 'application/json' // 默认值 }, method:"POST", success :res=> { console.log(res.data.data) this.setData({ info:res.data.data }) } }) }, })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现