微信小程序发布列表页面处理
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
})
} }) }, })

微信小程序发布列表页面处理的更多相关文章
- 微信小程序新闻列表功能(读取文件、template模板使用)
微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...
- 微信小程序发布一个月,世界并没有什么不同
从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...
- Java Web项目,Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
- (十二)微信小程序实现登陆页面+登陆逻辑
微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> ...
- 完整微信小程序授权登录页面教程
完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...
- 微信小程序新闻网站列表页
在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...
- 微信小程序之实现页面缩放式侧滑效果
效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 ...
- 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()
我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // ...
- 微信小程序(2)——新建页面
在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入&qu ...
随机推荐
- JVM学习二:JVM之GC算法和种类
我们前面说到了JVM的常用的配置参数,其中就涉及了GC相关的知识,趁热打铁,我们今天就学习下GC的算法有哪些,种类又有哪些,让我们进一步的认识GC这个神奇的东西,帮助我们解决了C 一直挺头疼的内存回收 ...
- Java线程--ThreadPoolExecutor使用
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11871132.html Java线程--ThreadPoolExecutor使用 public ...
- Java线程--ForkJoinPool使用
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11871099.html Java线程--ForkJoinPool使用 简单解释下: Fork是 ...
- finally块
/* finally 块: finally块的 使用前提是必须要存在try块才能使用. finally块的代码在任何情况下都会执行的,除了jvm退出的情况. finally非常适合做资源释放的工作,这 ...
- TableView载入WebView的一些小技巧 By 徐
开发APP的时候,有时候会遇到服务器返回来的数据是一堆html内容,但是又不一定是完整的html ,可能只包含了主要内容,包括一些图片,文字等 然而我们处理带有html标签的数据时,用webview是 ...
- VLAN大战三层交换机 以及无敌的Hybrid
VLAN与三层交换机 1.VLAN的概念与优势 2.VLAN的种类 3.静态VLAN的配置 4.Trunk介绍and配置 5.三层交换机原理 6.hybrid 1.当某个网络设备出现 故障后,就会不停 ...
- (4)Canal多实例使用
1.前言 很多时候,我们很多业务场景可能只需要同步多个或者单个数据库多个或者单个表的数据,canal提供了多实例(Instance)功能让我们可以处理这些业务场景.废话少说,让我们来学习下这块知识点. ...
- Windows微信清理工具v.3.0.1
Windows微信清理工具v.3.0.1 今天,我原创的Windows微信清理工具迎来最大更新! v.3.0.0更新内容: 1.使用tkinter重构GUI,界面更简单易用! 2.增加"清理 ...
- 运行EXE文件,系统提示缺少api-ms-win-crt-runtime-l1-1-0.dll,解决方法!!
api-ms-win-crt-runtime-l1-1-0.dll是一个Windows系统的应用程序拓展文件,也叫动态链接库文件.这个文件能帮助绝大多数用户解决在安装或启动部分游戏软件时出现计算机中丢 ...
- Acme-https证书申请
Linux下使用acme.sh 配置https 免费证书 简单来说acme.sh 实现了 acme 协议, 可以从 let's encrypt 生成免费的证书. acme.sh 有以下特点: 一个纯粹 ...