微信小程序信息展示列表

效果展示:

代码展示:

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 点赞

微信小程序信息展示列表的更多相关文章

  1. 微信小程序信息展示

    概述 使用第三方在线API模拟数据,进行微信小程序开发.不会后端开发也可以体验微信小程序. 详细 代码下载:http://www.demodashi.com/demo/10719.html 一.准备工 ...

  2. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  3. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  4. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  5. 微信小程序,我的英雄列表

    最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...

  6. 微信小程序 - 展开收缩列表

    代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...

  7. 微信小程序云开发-列表数据分页加载显示

    一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...

  8. 微信小程序云开发-列表下拉刷新

    一.json文件开启页面刷新 开启页面刷新.在页面的json文件里配置两处: "enablePullDownRefresh": true, //true代表开启页面下拉刷新 &qu ...

  9. 微信小程序 左右分类列表

    分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据. wxml代码: <vi ...

随机推荐

  1. Ubuntu安装Hadoop与Spark

    更新apt 用 hadoop 用户登录后,我们先更新一下 apt,后续我们使用 apt 安装软件,如果没更新可能有一些软件安装不了.按 ctrl+alt+t 打开终端窗口,执行如下命令: sudo a ...

  2. Angular动画(ng-repeat)

    ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...

  3. SCI Index

    Nature.[link]                                       Science.[link]                                  ...

  4. Linux的yum源的配置

    yum实际上是管理的rpm软件包 只要连接网络就可以使用在线的yum源,不用配置本地yum源 网络yum源/etc/yum.repos.d/fedora.repo(Fedora)[fedora]nam ...

  5. centos7 安装教程

    1. 在安装的时候,不要用默认的最小安装.选择GNOME Desktop 2.自动分区的时候,选择自己进行分区 2个分区,1个大小为1024M的swap分区,剩下的分配一个ext3的分区.设备类型都选 ...

  6. 51nod 1270 数组的最大代价

    1270 数组的最大代价题目来源: HackerRank基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 数组A包含N个元素A1, A2......AN.数组B包含N ...

  7. HBase数据库增删改查常用命令操作

    最近测试用到了Hbase数据库,新建一个学生表,对表进行增删改查操作,把常用命令贴出来分享给大家~ 官方API:https://hbase.apache.org/book.html#quickstar ...

  8. 46.Linux-分析rc红外遥控平台驱动框架,修改内核的NEC解码函数BUG(1)

    内核版本          :  Linux 3.10.14 rc红外接收类型:  GPIO 类型的NEC红外编码 本章内容 1) rc体系结构分析 2) 分析红外platform_driver平台驱 ...

  9. 寒假特训——搜索——H - Nephren gives a riddle

    What are you doing at the end of the world? Are you busy? Will you save us? Nephren is playing a gam ...

  10. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...