微信小程序信息展示列表
微信小程序信息展示列表
效果展示:
代码展示:
wxml
<view class="head">
<view class="head_item">分类</view>
<view class="ring"></view>
<view class="head_item">价格</view>
</view>
<block wx:for="{{ets}}">
<view class="item" bindtap="seePerson" id="{{item.id}}">
<view class='img'>
<!-- img -->
<image src="{{baseUrl}}{{item.avatar}}" style="width:100px;height:100px;"></image>
</view>
<view class="intro">
<!-- 广东礼仪带队宵夜 -->
<view class="position">
{{item.name}}
</view>
<view class="jiaqian">
¥--/人
</view>
<view class="address">
原价:¥--
</view>
<!-- 广州市 | 共有49个案例,0个视频 -->
<view class="dizhi">
{{item.city}} {{item.gender}} {{item.age}} {{item.label}}
</view>
</view>
<button class='but'>火爆</button>
<view class='rendu'>
热度:190
</view>
</view>
<view class="hr"></view>
</block>
<!--
<view class="item">
<view class='img'>
<image src="{{img}}" style="width:100px;height:100px;"></image>
</view>
<view class="intro">
<view class="position">
广东礼仪带队宵夜
</view>
<view class="jiaqian">
¥300/人
</view>
<view class="address">
原价:¥500
</view>
<view class="dizhi">
广州市 | 共有49个案例,0个视频
</view>
</view>
<button class='but'>6.0折</button>
<view class='rendu'>
热度:190
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class='img'>
<image src="{{img}}" style="width:100px;height:100px;"></image>
</view>
<view class="intro">
<view class="position">
广东礼仪带队宵夜
</view>
<view class="jiaqian">
¥300/人
</view>
<view class="address">
原价:¥500
</view>
<view class="dizhi">
广州市 | 共有49个案例,0个视频
</view>
</view>
<button class='but'>6.0折</button>
<view class='rendu'>
热度:190
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class='img'>
<image src="{{img}}" style="width:100px;height:100px;"></image>
</view>
<view class="intro">
<view class="position">
广东礼仪带队宵夜
</view>
<view class="jiaqian">
¥300/人
</view>
<view class="address">
原价:¥500
</view>
<view class="dizhi">
广州市 | 共有49个案例,0个视频
</view>
</view>
<button class='but'>6.0折</button>
<view class='rendu'>
热度:190
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class='img'>
<image src="{{img}}" style="width:100px;height:100px;"></image>
</view>
<view class="intro">
<view class="position">
广东礼仪带队宵夜
</view>
<view class="jiaqian">
¥300/人
</view>
<view class="address">
原价:¥500
</view>
<view class="dizhi">
广州市 | 共有49个案例,0个视频
</view>
</view>
<button class='but'>6.0折</button>
<view class='rendu'>
热度:190
</view>
</view>
<view class="hr"></view> -->
wxss
.item {
display: flex;
flex-direction: row;
}
.head_item {
width: 374rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
}
.head {
height:80rpx;
background-color: #D53E37;
border-top: 1rpx solid #fff;
border-bottom: 1rpx solid rgba(204, 204, 204, 1);
display: flex;
align-items: center;
top: 0;
}
.ring {
width: 2rpx;
height: 100%;
background-color: rgba(204, 204, 204, 1);
}
.img {
margin: 10rpx 0 10rpx 10rpx;
}
.intro {
display: flex;
flex-direction: column;
margin-left: 10px;
width: 100%;
}
.introing {
display: flex;
flex-direction: column;
flex: right;
margin-right: 30rpx;
}
.position {
margin-top: 20rpx;
width: 60%;
font-size: 28rpx;
font-weight: bold;
}
.jiaqian {
font-size: 28rpx;
color: red;
margin-top: 20rpx;
}
.address {
font-size: 25rpx;
color: #999;
margin-top: 20rpx;
}
.dizhi {
font-size: 25rpx;
margin-top: 20rpx;
}
.but {
position: absolute;
font-size: 25rpx;
margin-left: 620rpx;
margin-top: 55rpx;
border: red;
color: red;
}
.rendu {
position: absolute;
font-size: 25rpx;
margin-left: 620rpx;
margin-top: 120rpx;
}
.line {
align-content: center;
border: 1px solid #ccc;
opacity: 0.2;
}
.hr {
height: 10px;
background-color: #eee;
}
json
{
"navigationBarTitleText": "达叔小生",
"enablePullDownRefresh": true
}
js
// 获取应用实例
var app = getApp()
Page({
data: {
ets: [],
baseUrl: app.globalData.baseUrl
},
onLoad: function() {
// this.loading();
var that = this;
that.loadPer();
},
// 加载艺人列表
loadPer: function() {
var that = this;
wx.request({
url: app.globalData.baseUrl + '/list/', // 接口地址
method: 'GET',
header: {
'content-type': 'application/json' //默认值
},
// 成功
success: function(res) {
console.log("加载艺人列表 成功", res.data.data);
that.setData({
ets: res.data.data
});
},
// 失败
fail: function(err) {
console.log("加载艺人列表 失败", err);
}
})
},
// 下拉刷新
onPullDownRefresh: function() {
console.log("下拉刷新")
var that = this;
wx.showNavigationBarLoading()
setTimeout(() => {
that.loadPer();
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
}, 2000)
},
seePerson: function(e) {
// if (!e.currentTarget.id == "") {
// wx.navigateTo({
// url: "../person/person?id=" + e.currentTarget.id
// })
// console.log(e)
// } else {
// console.log("无内容")
// }
if (!e.currentTarget.id == "") {
wx.navigateTo({
url: "../detailjiemu/detailjiemu?id=" + e.currentTarget.id
})
console.log(e)
} else {
console.log("无内容")
}
}
})
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
微信小程序信息展示列表的更多相关文章
- 微信小程序信息展示
概述 使用第三方在线API模拟数据,进行微信小程序开发.不会后端开发也可以体验微信小程序. 详细 代码下载:http://www.demodashi.com/demo/10719.html 一.准备工 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
- 图解微信小程序---获取电影列表
图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console Log的方式获取我们电影的相关数据字段,后 ...
- 微信小程序,我的英雄列表
最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...
- 微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- 微信小程序云开发-列表下拉刷新
一.json文件开启页面刷新 开启页面刷新.在页面的json文件里配置两处: "enablePullDownRefresh": true, //true代表开启页面下拉刷新 &qu ...
- 微信小程序 左右分类列表
分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据. wxml代码: <vi ...
随机推荐
- Linux vim常见使用详解
教你用Vim编辑器 1.Vim编辑器基本使用方法 光标移动 查找/替换 插入模式 复制/粘贴 复制/粘贴 2.vim打开时的警告信息 当使用vim打开一个文件时,会同时在该目录下创建个.filenam ...
- 网址导航19A
[导航] KIM主页 265导航 好866 [名站] 百度 网易 腾讯 新华 中新 凤凰 [新闻] 联合早报 南方周末 澎湃新闻 [系统] 宋永志 蒲公英 技术员 装机网 系统之家 [软件] 星愿 ...
- mactype配置
配合 Firefox 小小设置(改了好多配置,似乎主要是修改了渲染的核心?是叫这个么?把那个Siera?删掉了,就好了)后,效果极佳,我在原有配置的基础上,加大了字重,显示更粗,更明显. 这里是原配置 ...
- View操作 swift
//创建View let view1 =UIView() let view2 =UIView(frame: CGRectMake(,, ,)) let view3 =UIView(frame: CGR ...
- python 10 迭代器和三元运算符
一.迭代器 1.迭代器协议:对象必须提供一种next方法,执行该方法要么返回迭代中的下一项,要么引起一个stopIteration异常,终止迭代 2.可迭代对象:实现了迭代器协议的对象 3.pytho ...
- spring.boot 无法加载oracle驱动的可能原因
.找到本地oracle安装目录下的ojdbc6.jar包,为了方便起见,复制到某盘的根目录(如F盘根目录),在cmd下进入F盘根目录(也就是ojdbc.jar复制的目录),同时我们需要查看ojdbc的 ...
- Finance公式说明
公式说明 代码 说明 Y 期末余额 JY 期末借方余额 DY 期末贷方余额 C 期初余额 JC 期初借方余额 DC 期初贷方余额 SY 本期实际发生额 SL 利润表本年实际发生额 SY 期末余额 SJ ...
- 第二阶段第七次spring会议
昨天我将尝试对软件进行添加搜索引擎的界面. private void linkLabel1_LinkClicked_1(object sender, LinkLabelLinkClickedEvent ...
- 安装composer Failed to decode zlib stream 问题解决方法
https://getcomposer.org/download/ 页面下载最新版本 composer.phar 放到php.exe 页面下.创建一个.bat文件,存入下面内容 @ECHO OFF p ...
- shell脚本学习-练习写一个脚本2
# 1.依次展示/var目录下的对象,并说明是文件或者目录.格式如:Hello,$file. # 2.统计一个有多少个文件. #!/bin/bash #Program Description: #Au ...