微信小程序无小熊日记大图图文列表样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--mark.wxml-->

<navigator wx:for="{{diaries}}" wx:for-index="idx" class="item-container" url="../item/item?id={{idx}}">
  <image mode="aspectFit" src="{{item.image}}" class="cover"></image>
  <view class="desc">
    <view class="left">
      <view style="font-size:32rpx;margin:10rpx 0;">{{item.title}}</view>
      <view style="font-size:24rpx;color:darkgray">{{item.meta}}</view>
    </view>
    <view class="right">
      <image mode="aspectFit" src="{{item.avatar}}"></image>
      <view style="font-size:18rpx;margin-top:10rpx;color:darkgray">{{item.nickname}}</view>
    </view>
  </view>
</navigator>

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

/** list.wxss **/

.item-container {
  margin: 10rpx 20rpx;
  position: relative;
}

.cover {
  width: 100%;
  height: 400rpx;
  display: block;
}

.desc {
  margin: 10rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #E5E7ED;
}

.desc .left {
}

.desc .right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right image{
  display: block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

三、js页面代码如下：

// index.js

var app = getApp()

var diaries = require("../../demo/list.js")

Page({

    data: {
        diaries: diaries.data.diaries,
        deviceInfo: {},
    },

    onLoad() {
        var that = this;
        // 获取当前设备信息
        app.getDeviceInfo(function(deviceInfo) {
            that.setData({
                deviceInfo: deviceInfo,
            });

            console.log(deviceInfo);
        })
    }
})

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