微信小程序信息展示列表

程序信息展示列表"/>

微信小程序信息展示列表

微信小程序信息展示列表

效果展示:

代码展示:

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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生

结语

• 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞