微信小程序发布列表页面处理
- 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 ...
随机推荐
- 「JOI 2015 Final」舞会
「JOI 2015 Final」舞会 略微思考一下即可知该过程可以化为一棵树.(3个贵族中选择1个,即新建一个节点连向这3个贵族). 该树的结点个数为\(2n\). 考虑二分答案mid. 判定的是公主 ...
- hihoCoder挑战赛1 毁灭者问题
题目链接:http://hihocoder.com/problemset/problem/1034 数据结构题,由于每个魔法单位有着不同的回复速度和上限,所以不能根据吸收时间点进行查询和更新.但是如果 ...
- 样式操作案例5-改变box的大小和位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 对象的深克隆
前端笔试或者面试的时候,很喜欢问的一个问题就是对象的深度克隆,或者说是对象的深度复制.其实这个问题说容易很容易,但是要说全面也挺不易. 要弄明白对象的克隆,首先要明白js中对象的组成.在js中一切实例 ...
- 解决sublime代码不提示的问题
如果想让sublime在你输入标签的过程中给你提示,需要按要求开启以下功能. 1.开启代码自动提示功能
- OC和C对比
1.源文件对比 C语言中常见源文件.h头文件,.c文件 文件扩展名 源类型 .h 头文件,用于存放函数声明 .c C语言源文件,用于实现头文件中声明的方法 OC中的源文件.h头文件,.m与.mm的实现 ...
- 数据库监测sql执行
SQL Server Profiler可以检测在数据上执行的语句,特别是有的项目不直接使用sql语句,直接使用ORM框架的系统处理数据库的项目,在调试sql语句时,给了很大的帮助. 之前写了使用SQL ...
- 反射(reflection),通过反射创建对象
简单尝试: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public cl ...
- uos系统离线状态下进入开发者模式
需到处机器信息,接着登入指定的uos开发者网站,下载证书,然后在机器上加载证书,重启即可.
- python使用泛型
所谓的泛型, 就是将数据类型作为参数进行传递, 即在我们用的时候确定数据类型, 这是一种在面向对象语言中经常使用的特性 一般类使用 以SQLAlchemy举例 比如: 我们统一写个将数据保存到数据库的 ...