微信小程式資訊展示列表

效果展示:

程式碼展示:

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 點贊