微信小程序信息展示列表

逃离我推掉我的手 2021-09-17 11:08 566阅读 0赞

![标题图][1240]

> 微信小程序信息展示列表

效果展示:

![效果展示][strip]

## 代码展示: ##

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'>
          
          <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>
          
          <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>

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
    }

// 获取应用实例
    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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[1240]: /images/20210724/142d2b613f4f477d89de764937da48a5.png
[strip]: /images/20210724/4e1f3211c5fa44d1a617da305b633224.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1