微信小程序信息展示列表

原文链接： https://my.oschina.net/xiaomaomi1997/blog/2995459

微信小程序信息展示列表

效果展示:

代码展示:

wxml

  分类
  
  价格


  
    
      
      
    
    
      
      
        {{item.name}}
      
      
        ￥--/人
      
      
        原价：￥--
      
      
      
        {{item.city}} {{item.gender}} {{item.age}} {{item.label}}
      
    
    火爆
    
      热度：190
    
  
  

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

转载于:https://my.oschina.net/xiaomaomi1997/blog/2995459