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
})
} }) }, })

微信小程序发布列表页面处理的更多相关文章

  1. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  2. 微信小程序发布一个月,世界并没有什么不同

    从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...

  3. Java Web项目,Android和微信小程序的初始页面配置

    Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...

  4. (十二)微信小程序实现登陆页面+登陆逻辑

    微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> ...

  5. 完整微信小程序授权登录页面教程

    完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...

  6. 微信小程序新闻网站列表页

    在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...

  7. 微信小程序之实现页面缩放式侧滑效果

    效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 ...

  8. 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

    我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // ...

  9. 微信小程序(2)——新建页面

    在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入&qu ...

随机推荐

  1. resp.getWriter().print(categoryList)、resp.getWriter().write(String)与new ObjectMapper().writeValue(resp.getOutputStream(),categoryList)的区别

    前言:最近在复习原生的servlet的时候,对其输出流不理解,故总结一下: resp.getWriter().print(categoryList) 可以输出字符串,也可以输出对象,可能还有其他类型, ...

  2. 汉字编码(【Unicode】 【UTF-8】 【Unicode与UTF-8之间的转换】 【汉字 Unicode 编码范围】【中文标点Unicode码】【GBK编码】【批量获取汉字UNICODE码】)

    Unicode与UTF-8互转(C语言实现):http://blog.csdn.net/tge7618291/article/details/7599902 汉字 Unicode 编码范围:http: ...

  3. android 安装gcc环境

    看到了一篇关于Android上利用终端来使用gcc编译C/C++源程序的文章,我感到无比兴奋,所以立刻将我自己的安装过程记下来.那个后记也很有用的. gcc编译源代码需要创建临时文件,而gcc又只能安 ...

  4. JAVA_HOME环境的配置

    JAVA_HOME环境的配置 有时候可能需要更换Jdk的目录,但是经常修改path的值可能会不小心修改其他的路径,解决方法: 1.  创建一个JAVA_HOME的变量. 2.  JAVA_HOME的值 ...

  5. 问题描述 ens33 不见了

    事情是这样紫的 我今天用Xshell 连接Linux 发现连接不上去百思不得其解,然后就去Linux里看 ifconfig 的配置,然后发现 ens33居然不见了,就只有lo 和 virbr()  , ...

  6. 详解xpath定位

    xpath定位 1.通过开发者工具直接copy 右击copy-copy xpath 2.串联的方式定位元素 from selenium import webdriverfrom time import ...

  7. 20161206日更新CocoaPods版本

    从网上下载的工程第三方库需要更新,但当我执行pod update时提示以下错误: [!] The `master` repo requires CocoaPods 1.0.0 -  (currentl ...

  8. 基于GDAL库海洋表温日平均计算工具设计与实现 C++版

    技术背景 在对物理海洋数据处理过程中,表层温度是众多要素中的一种,本文书要是针对海洋表温数据批量日平均处理的一个工具设计.首先要在对当前的SST数据文件作一下简要的说明,SST全称为sea surfe ...

  9. Solution -「CF 575G」Run for beer

    \(\mathcal{Description}\)   Link.   给定 \(n\) 个点 \(m\) 条边的无向图,边有边权,一个人初始速度为 \(1\),每走一条边速度 \(\div10\), ...

  10. python好用的函数或对象

    1.ljust.rjust "hello".ljust(10,"x") #将字符串hello做对齐,并且用字符'x'补到10个字符 #输出为:helloxxxx ...