微信小程序小知识点

一：图片高度自适应

1. 先将image宽度设置为固定宽度

.headerImage{
　width: 100%;
}

2.并设置image的mode属性

 mode="widthFix"

二.加载Base64编码图片 || view加载背景图片

1、获取Base64编码图片

    const read = wx.getFileSystemManager();
    read.readFile({
      filePath: '/images/test.png',
      encoding:'base64',
      success: function(data){
        // 更新图片资源
       this.setData({
         imageBase: "data:image/png;base64," + data.data 
       })
      }
    })

2、图片赋值

3、如果是直接copy的Base64编码就创建一分保存Base64编码图片的js文件

// 文件名
imagesBase.js

var minPopImage = 'xxxxx'

module.exports = {
  minPopImage: minPopImage,
}

4、js文件引用

var baseImage = require('../../utils/imagesBase.js');

5、图片资源赋值

Page({
  data: {
    baseUrl: app.globalData.baseUrl,
  },
})

第三方图片生成网站

三：scroll-view隐藏滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

四：防止事件穿透

例子

当我们弹出一个窗口，点击窗口的事件不能影响到后面的控件，比如后面的列表点击或滚动。只需在遮罩加一个拦截事件如：

五： rich-text 加载HTML图片正常显示

wxml文件

js文件

  var feeInfoHtml = common.escapeHtml
  // 适配图片大小
  feeInfoHtml = feeInfoHtml.replace(/\

六： scroll-view 横向布局

wxml文件

这是一个cell

 

wxss文件
1.先设置scroll-view宽高和不换行

.header-conten {
  width: calc(100vw - 64rpx);
  height: 100rpx;
  white-space: nowrap;
}

2.设置cell为行内块元素

.header-cell {
  display: inline-block;
  width: 200rpx;
  height: 100rpx;
}

七： 文本超出显示

1.单行超出显示

text {
  /* 超出的文本内容隐藏 */
  overflow: hidden;
  /* 超出显示省略号 */
  text-overflow: ellipsis;
  /* 强制不换行 */
  white-space: nowrap;
}

2.多行超出显示

.infoText{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-content: center;
}