• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序:列表(获取json中的数据)

原作者: [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>

(3)测试结果:

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序请求数据发布时间:2022-07-18
下一篇:
[FAQ]uni-app运行微信小程序main.wxss报错unexpectedtoken&quot;$&quot; ...发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap