微信小程序各大日报今日热闻列表样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="themes_container">
    <view class="list_item" wx:for="{{themes}}"  wx:for-index="idx" bindtap="onItemClick" data-idx="{{idx}}">
        <view class="list_top">
            <view class="list_left">
                <text class="list_item_text">{{item.name}}</text>
                <text class="list_item_text2">{{item.description}}</text>
            </view>
            <image class="list_item_icon" src="{{item.thumbnail}}"></image>
        </view>
        <!--<view class="line"></view>-->
    </view>
</view>

二、wxss样式文件代码如下：

.themes_container {
    display: flex;
    flex:1;
    width: 100%;
    flex-direction: column;
}
.list {
    flex:1;
}
.list_item {
    display: flex; 
    flex:1;
    flex-direction: column;
}

.list_top {
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx;
    margin: 10rpx;
    
    border: 1rpx solid #eee;
    border-bottom: 1rpxpx solid #ccc;
    border-radius: 5rpx;
}

.list_left {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.list_item_text {
    font-size: 40rpx;
}

.list_item_text2 {
    margin-top: 20rpx;
    font-size: 28rpx;
}

.list_item_icon {
    width: 120rpx;
    height:120rpx;
}

.line {
    flex:1;
    display: flex;
    height:2rpx;
    background-color:black;
}

三、js页面代码如下：

// themes.js
Page({
  data: {
    themes:[]
  },
  onLoad: function () {
      console.log('themes.onLoad');

      var that = this;
      // 加载数据
      wx.request({
        url: 'http://news-at.zhihu.com/api/4/themes',
        header:{"Content-Type":"application/json"},
        success: function(res) {
            var data = res.data;
            console.log('data = '+JSON.stringify(data));
            var temp = [];
            temp.push({'name':'今日热闻','thumbnail':null,'description':'今日热闻'})
            for(var i in data.others){
              temp.push(data.others[i]);
            }            
            that.setData({themes:temp});
        },
        fail:function(error) {
            console.log(error)
        }
    });
  },
  onItemClick:function(event){
    var idx = event.currentTarget.dataset.idx;
    var item = this.data.themes[idx];
    console.log('item = '+JSON.stringify(item))
    if(item.id){
      wx.navigateTo({url: '../normal/normal?id='+item.id+'&title='+item.name});
    } else {
      wx.navigateTo({url: '../hotnews/hotnews'});
    }
  }
})

模板简介：该模板名称为【微信小程序各大日报今日热闻列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。