小程序：列表（获取json中的数据）

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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>