1. wxml
  2. <!--pages/good_index/good_index.wxml-->
  3. <view class='list'>
  4. <block wx:for='{{info}}' wx:key='list' wx:for-item="item">
  5. <view class="list_item">
  6. <!-- <navigator url='details?id={{item.goods_id}}'> -->
  7. <view class='img'>
  8. <image src="/pages/img/1.jpg" mode="scaleToFill"/>
  9. </view>
  10. <view class='info'>
  11. <view class='title'>商品名称:{{item.title}}</view>
  12. <view class='price'>商品价格:¥{{item.price}}</view>
  13. <view class='num'>商品销量:{{item.type }}</view>
  14. <view class='nums'>商品属性:{{item.type }}</view>
  15. </view>
  16. </view>
  17. </block>
  18. </view>

wx.ss

  1. /* pages/good_index/good_index.wxss */
  2. .clear{
  3. clear: both;
  4. overflow: hidden;
  5. }
  6. navigator{
  7. display:inline;
  8. }
  9. .list{
  10. margin-top:10px;
  11. }
  12.  
  13. .list .list_item{
  14. margin-top:10px;
  15. padding:10px;
  16. height:100px;
  17. border-bottom:1px solid #E8E8E8;
  18. }
  19. .list .list_item .img{
  20. float:left;
  21. width:40%;
  22. height:100%;
  23. }
  24. .list .list_item .img image{
  25. width:100%;
  26. height:100%;
  27. }
  28.  
  29. .list .list_item .info{
  30. width:59%;
  31. float:right;
  32. height:100px;
  33. position:relative;
  34. }
  35. .list .list_item .info .title{
  36. color:#333;
  37. margin-left:10px;
  38. font-size: 15px;
  39. }
  40.  
  41. .list .list_item .info .price{
  42. color:#FF2727;
  43. margin-left:10px;
  44. margin-top:10px;
  45. font-size:15px;
  46. }
  47.  
  48. .list .list_item .info .num{
  49. position: absolute;
  50. left:0px;
  51. bottom:10px;
  52. color:#747474;
  53. margin-left:10px;
  54. font-size:15px;
  55. }
  56. .list .list_item .info .nums{
  57. position: absolute;
  58. left:0px;
  59. bottom:10px;
  60. color:#747474;
  61. margin-left:10px;
  62. font-size:15px;
  63. }

wx.js

  1. // pages/good_index/good_index.js
  2. Page({
  3.  
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8.  
  9. info:[]
  10. },
  11.  
  12. /**
  13. * 生命周期函数--监听页面加载
  14. */
  15. onLoad: function (options) {
  16. wx.request({
  17. url: 'http://www.yan.com/api/xcx/goodIndex', //仅为示例,并非真实的接口地址
  18. header: {
  19. 'content-type': 'application/json' // 默认值
  20. },
  21. method:"POST",
  22. success :res=> {
  23. console.log(res.data.data)
  24. this.setData({
  25. info:res.data.data
  26. })
  27. }
  28.  
  29. })
  30.  
  31. },
  32.  
  33. })

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

  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. 「JOI 2015 Final」舞会

    「JOI 2015 Final」舞会 略微思考一下即可知该过程可以化为一棵树.(3个贵族中选择1个,即新建一个节点连向这3个贵族). 该树的结点个数为\(2n\). 考虑二分答案mid. 判定的是公主 ...

  2. hihoCoder挑战赛1 毁灭者问题

    题目链接:http://hihocoder.com/problemset/problem/1034 数据结构题,由于每个魔法单位有着不同的回复速度和上限,所以不能根据吸收时间点进行查询和更新.但是如果 ...

  3. 样式操作案例5-改变box的大小和位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js 对象的深克隆

    前端笔试或者面试的时候,很喜欢问的一个问题就是对象的深度克隆,或者说是对象的深度复制.其实这个问题说容易很容易,但是要说全面也挺不易. 要弄明白对象的克隆,首先要明白js中对象的组成.在js中一切实例 ...

  5. 解决sublime代码不提示的问题

    如果想让sublime在你输入标签的过程中给你提示,需要按要求开启以下功能. 1.开启代码自动提示功能

  6. OC和C对比

    1.源文件对比 C语言中常见源文件.h头文件,.c文件 文件扩展名 源类型 .h 头文件,用于存放函数声明 .c C语言源文件,用于实现头文件中声明的方法 OC中的源文件.h头文件,.m与.mm的实现 ...

  7. 数据库监测sql执行

    SQL Server Profiler可以检测在数据上执行的语句,特别是有的项目不直接使用sql语句,直接使用ORM框架的系统处理数据库的项目,在调试sql语句时,给了很大的帮助. 之前写了使用SQL ...

  8. 反射(reflection),通过反射创建对象

    简单尝试: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public cl ...

  9. uos系统离线状态下进入开发者模式

    需到处机器信息,接着登入指定的uos开发者网站,下载证书,然后在机器上加载证书,重启即可.

  10. python使用泛型

    所谓的泛型, 就是将数据类型作为参数进行传递, 即在我们用的时候确定数据类型, 这是一种在面向对象语言中经常使用的特性 一般类使用 以SQLAlchemy举例 比如: 我们统一写个将数据保存到数据库的 ...