微信小程序发布列表页面处理
- 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 ...
随机推荐
- 「ZJOI2014」星系调查
「ZJOI2014」星系调查 本题核心在于快速求XPs 的线性假设相斥度. 点\((x1,y1)\)到直线\(y=kx+b\)的距离的平方为\(\displaystyle {(kx1+b-y1)^2} ...
- idea2020.1版本的maven项目报包不存在,找不到包错误
错误描述 idea创建maven项目,导入依赖都是成功,但是运行就会报找不到对应jar包的错误 解决办法: File -> Settings -> 搜索maven -> 展开mave ...
- Entity Framework 在OrderBy排序中使用字符串
public static class LinqExtensions { private static PropertyInfo GetPropertyInfo(Type objType, strin ...
- 腾讯QQ是用什么语言写的?
腾讯QQ的开发分客户端软件和服务器端软件两部分. 客户端采用 Microsoft Visual C++开发: 服务器端软件采用Linux gcc开发 : 数据库采用MySql 数据库. 腾讯QQ ...
- 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 ...
- 红色小圆点+数字的badge自定义小方法 by Nicky.Tsui
效果如图. 实现方法比较简单,在view上增加一个label label设置: 1 badgeLabel = [[UILabel alloc]initWithFrame:CGRectMake(CGRe ...
- JVM性能调优与实战基础理论篇-中
JVM内存模型 概述 我们所说的JVM内存模型是指运行时数据区,用New出来的对象放在堆中,如每个线程中局部变量放在栈或叫虚拟机栈中,下图左边区域部分为栈内存的结构.如main线程包含程序炯酸器.线程 ...
- InfluxDB 2.x Open Source Time Series Database
1. 说明 目前,大家普遍还在采用 InfluxDB 1.x 的版本,官方2.x的版本已经发布一段时间了, 其主推flux语言且自带前端炫酷图表. 2. 官方网站 https://www.influx ...
- 《深度探索C++对象模型》第一章 | 关于对象
C++对象模式 非静态数据成员放置在每个类对象内,静态数据成员则被放置在所有类对象之外.静态和非静态的成员函数也被放置在所有类对象之外.每个类产生一堆指向虚函数的指针,放在虚表(vtbl)中.每个类对 ...
- 记一次 .NET 某供应链WEB网站 CPU 爆高事故分析
一:背景 1. 讲故事 年前有位朋友加微信求助,说他的程序出现了偶发性CPU爆高,寻求如何解决,截图如下: 我建议朋友用 procdump 在 cpu 高的时候连抓两个dump,这样分析起来比较稳健, ...