微信小程序信息展示列表

微信小程序信息展示列表

效果展示:

代码展示:

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="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="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="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="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="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 {
   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 {
   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;
   100%;
}

.introing {
  display: flex;
  flex-direction: column;
  flex: right;
  margin-right: 30rpx;
}

.position {
  margin-top: 20rpx;
   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 点赞