微信小程序卡片效果

卡片列表效果:

cardview.gif

卡片两列效果:

cardview_2.gif

1.wxml代码:

<import src='/template/load-more/load-more.wxml' />

<view class='container'>
  <view class='mrys' wx:for="{{storyList}}">
    <image class='image' src='{{item.imageUrl}}' mode='aspectFill'></image>
    <view class='title'>{{item.title}}</view>
    <view class='content'>{{item.content}}</view>
  </view>

  <template is='loading' data='{{loading}}'></template>
</view>

2.wxss代码:
要使用两列效果,把.mrys前半部分注释掉,把下半注释部分打开即可.

@import '/template/load-more/load-more.wxss';

page {
  background: #fff;
}

.container {
  padding-top: 20rpx;
}

.mrys {
  /* 一列卡片 */
  margin: 16rpx;
  margin-bottom: 40rpx;
  padding: 10rpx;
  border: 2rpx solid #707b8b;
  border-radius: 2rpx;
  box-shadow: 8rpx 4rpx 4rpx #707b8b;
  position: relative;
  background-color: #98a5a5;
  /* 两列卡片 */
  /*   
  width: 48%;
  margin: 2% 1%;
  display: inline-block;
  vertical-align: top;
  position: relative; 
  */
}

.mrys .image {
  width: 100%;
  height: 240rpx;
  background-color: #eee;
}

.mrys .title {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 200rpx;
  margin-right: 20rpx;
  font-size: 11pt;
  color: #f9e3b0;
  z-index: 1;
}

.mrys .content {
  font-size: 10pt;
  color: #eee;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-indent: 20pt;
}

3.json代码:

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

4.js代码:
项目使用了云开发,从服务器端获取的数据.

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageIndex: 1,
    pageSize: 8,
    storyList: [],
    loading: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.loadMrysData();
  },

  /**
   * 获取列表数据
   */
  loadMrysData: function() {
    if (!this.data.loading) {
      return;
    }
    const db = wx.cloud.database();
    let { pageIndex, pageSize } = this.data;
    db.collection('mrys').where({

    }).limit(pageSize * pageIndex).get({
      success: res => {
        wx.stopPullDownRefresh();
        let list = this.data.storyList.concat(res.data);
        this.setData({
          storyList: res.data,
          loading: res.data.length == (pageSize * pageIndex)
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    this.setData({
      pageIndex: 1,
      loading: true
    })
    this.loadMrysData();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    let pageIndex = this.data.pageIndex + 1;
    this.setData({
      pageIndex: pageIndex
    })
    this.loadMrysData();
  }
})

---

圈点勾画

1.文本展示多行,并且超过行数省略号显示实现:

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  //最多展示两行,超出即显示省略号
  overflow: hidden;

2.段落前面空两个字的空格:
比如font-size: 10pt,那么就要设置text-indent为20pt.

text-indent: 20pt;  //字体大小*2

3.box-shadow设置边框阴影:

box-shadow.png

box-shadow: 8rpx 4rpx 4rpx #707b8b;

4.加载更多抽离成模板了,没有贴代码,用到的地方可直接删掉,不影响.