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. 「ZJOI2014」星系调查

    「ZJOI2014」星系调查 本题核心在于快速求XPs 的线性假设相斥度. 点\((x1,y1)\)到直线\(y=kx+b\)的距离的平方为\(\displaystyle {(kx1+b-y1)^2} ...

  2. idea2020.1版本的maven项目报包不存在,找不到包错误

    错误描述 idea创建maven项目,导入依赖都是成功,但是运行就会报找不到对应jar包的错误 解决办法: File -> Settings -> 搜索maven -> 展开mave ...

  3. Entity Framework 在OrderBy排序中使用字符串

    public static class LinqExtensions { private static PropertyInfo GetPropertyInfo(Type objType, strin ...

  4. 腾讯QQ是用什么语言写的?

    腾讯QQ的开发分客户端软件和服务器端软件两部分. 客户端采用 Microsoft Visual C++开发:  服务器端软件采用Linux gcc开发 :  数据库采用MySql 数据库.  腾讯QQ ...

  5. Jackson中处理map中的null key 或者null value 及实体字段中的null value

    1.map中有null key时的序列化  当有null key时,jackson序列化会报 Null key for a Map not allowed in JSON (use a convert ...

  6. 红色小圆点+数字的badge自定义小方法 by Nicky.Tsui

    效果如图. 实现方法比较简单,在view上增加一个label label设置: 1 badgeLabel = [[UILabel alloc]initWithFrame:CGRectMake(CGRe ...

  7. JVM性能调优与实战基础理论篇-中

    JVM内存模型 概述 我们所说的JVM内存模型是指运行时数据区,用New出来的对象放在堆中,如每个线程中局部变量放在栈或叫虚拟机栈中,下图左边区域部分为栈内存的结构.如main线程包含程序炯酸器.线程 ...

  8. InfluxDB 2.x Open Source Time Series Database

    1. 说明 目前,大家普遍还在采用 InfluxDB 1.x 的版本,官方2.x的版本已经发布一段时间了, 其主推flux语言且自带前端炫酷图表. 2. 官方网站 https://www.influx ...

  9. 《深度探索C++对象模型》第一章 | 关于对象

    C++对象模式 非静态数据成员放置在每个类对象内,静态数据成员则被放置在所有类对象之外.静态和非静态的成员函数也被放置在所有类对象之外.每个类产生一堆指向虚函数的指针,放在虚表(vtbl)中.每个类对 ...

  10. 记一次 .NET 某供应链WEB网站 CPU 爆高事故分析

    一:背景 1. 讲故事 年前有位朋友加微信求助,说他的程序出现了偶发性CPU爆高,寻求如何解决,截图如下: 我建议朋友用 procdump 在 cpu 高的时候连抓两个dump,这样分析起来比较稳健, ...