小程序：列表（獲取json中的數據）

1、定義樣式

.tab{
  font-size: 32rpx ;
  color:#86C811 ;
}
.current{
  color:#fff;
  background-color:#86C811;
  padding:6rpx 8rpx;
}
.main{
  width:95%;
  background-color:■#ffffff;
  margin:40rpx auto;
  border-radius:6rpx 6rpx 0 0;
  font-size:28rpx;
}
.header{
  width:100%;
  height:120rpx;
  background-color:#DDDDDD;
  display:flex;
  align-items:center;
  justify-content:space-around;
  font-size:32rpx;
}
.content{
  border-radius: 0 0 6rpx 6rpx;
  background-color: #ffffff;
}

.topic_list{
  width: 100%;
  height:100rpx;
  border-radius: 1px solid #DDDDDD;
  color: #888;
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
}
.topic_list image{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  
}
.put-top{
  font-size: 24rpx;
  color: #fff;
  background-color: #86c011;
  padding: 6rpx;
  border-radius: 4rpx;
  margin: 0 20rpx 0 10rpx;
  
}

.titles{
  font-size: 28rpx;
  display: inline-block;
  width: 450rpx;
  height: 50rpx;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 
}
.topic_list_bottom{
  font-size: 24rpx;
  color: #b4b4b4;
}
.reply_count{
  position: absolute;
  left: 165rpx;
  bottom: 5rpx;
}
.last_active_time{
  position: absolute;
  right: 165rpx;
  bottom: 5rpx;
}

總結：

（1）topic_list：為相對定位，相對於last_active_time和reply_count來說，topic_list是他們的祖先元素，絕對定位中元素在移動位置的時候是相對於祖先元素來說的，如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為准

（2）box-sizing: border-box，消除內邊距padding對盒子大小的影響

 

2、界面設計

（1）導航欄

 <view class="header">
        <block wx:for="{{t}}">
        <view class="tab {{currentIndex==item.sub ? 'current':''}}" bindtap="tabchange" data-num="{{item.sub}}">{{item.name}}</view>
        </block>
    </view>

獲取數據完成渲染

（2）列表

<view class="content">
    <navigator class="topic_list" wx:for="{{20}}">
    <view class="topic_list_bottom">
            <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593318264073&di=4b32cef2fedab1360d3f4b2d0c109c06&imgtype=0&src=http%3A%2F%2Fdmimg.5054399.com%2Fallimg%2Fpkm%2Fpk%2F13.jpg"></image>
            <text class="put-top">置頂</text>
            <text class="titles">我是標題AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</text>
    </view>
    <view class="topic_list_bottom">
        <view class="reply_count">
            <text>10</text>
            <text>/</text>
            <text>11032</text>
        </view>
            <text class="last_active_time">10day</text>
     </view>
    </navigator>
    </view>
</view>

引用布局，完成圖片文字的顯示

（3）頁面初始數據

  data: {
    t:[{
           name:"全部",
           sub:1
         },
         {
          name:"精華",
          sub:2
        },
        {
          name:"分享",
          sub:3
        },
        {
          name:"問答",
          sub:4
        },
        {
          name:"招聘",
          sub:5
        }
       ],
       currentIndex:1
  },

 

3、頁面獲取json類型的數據

（1）准備數據

    "success": true,
    "data": [{
        "id": "5d5bed6ed53e9171e98a975b",
        "author_id": "516f989a6d38277306ae8c1b",
        "tab": "share",
        "content": "<div class=\"markdown-text\"><p>這是一次硬核的地下鐵沙龍，\n我們深入 Node.js 運行時底層，\n來討論如何進行運行時的優化和診斷，\n讓它可以在 Serverless，IoT 等等場景釋放更大的價值。</p>\n<p>五位重量級的嘉賓，\n有 Node.js 基金會技術委員會（TSC）唯一中國成員，\n有來自瀏覽器廠商的骨灰級技術專家，\n還有阿里、Rokid 的大牛。</p>\n<p>歡迎你和我們一起，進入深海。</p>\n<p><strong>Agenda</strong>\n<img src=\"https://img.alicdn.com/tfs/TB10BqFdLb2gK0jSZK9XXaEgFXa-1408-2040.png\" alt=\"Agenda\"></p>\n<p>時 間：2019.09.08 下午 2 點\n地 點：杭州浙江大學玉泉校區（具體地址詳見邀約）</p>\n<p>報 名 鏈 接: <a href=\"https://survey.alibaba.com/apps/zhiliao/QlwUc77lF\">https://survey.alibaba.com/apps/zhiliao/QlwUc77lF</a>\n活 動 主 頁: <a href=\"https://fed.taobao.org/subway/\">https://fed.taobao.org/subway/</a></p>\n</div>",
        "title": "Node 地下鐵第九期「杭州站」線下沙龍邀約 - Let's Go Deep",
        "last_reply_at": "2019-08-23T07:51:41.949Z",
        "good": false,
        "top": true,
        "reply_count": 6,
        "visit_count": 2443,
        "create_at": "2019-08-20T12:54:06.836Z",
        "author": {
            "loginname": "mariodu",
            "avatar_url": "//gravatar.com/avatar/1cb272a2b4347c9a15b502ce7e4802ba?size=48"
        }
    },

這里只列舉一條數據。

（2）頁面獲取數據

<view class="content">
    <navigator class="topic_list" wx:for="{{list_data}}">
    <view class="topic_list_bottom">
            <image src="{{item.author.avatar_url}}"></image>
            <text class="put-top" wx:if="{{item.top}}">置頂</text>
            <text class="put-top" wx:elif="{{item.tab==='ask'}}">提問</text>
            <text class="put-top" wx:elif="{{item.tab==='share'}}">分享</text>
            <text class="put-top" wx:else></text>
            <text class="titles">{{item.title}}</text>
    </view>
    <view class="topic_list_bottom">
        <view class="reply_count">
            <text>{{item.reply_count}}</text>
            <text>/</text>
            <text>{{item.visit_count}}</text>
        </view>
            <text class="last_active_time">{{item.create_at}}</text>
     </view>
    </navigator>
    </view>
</view>

（3）測試結果：