微信小程序小知识点

一：图片高度自适应

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

.headerImage{
　width: 100%;
}

2.并设置image的mode属性

 mode="widthFix"
<image class="img" src="../../images/hello.png" 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、图片赋值

<view style='background-image:url({{imageBase}});-webkit-background-size: cover;'></view>

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;
}

四：防止事件穿透

例子

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

<!-- 遮罩 strat-->
<view class='mask-baseView' 
 catchtouchmove='invalidClick'>
 </view>

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

wxml文件

<rich-text class='product-cellText' nodes="{{foodFeeInfoHtml}}"></rich-text>

js文件

  var feeInfoHtml = common.escapeHtml
  // 适配图片大小
  feeInfoHtml = feeInfoHtml.replace(/\<img/gi, '<img style="width:100%;height:auto" ')
  that.setData({
      foodFeeInfoHtml: feeInfoHtml,
    })

六： scroll-view 横向布局

wxml文件

<scroll-view class='header-conten' scroll-x="true">
<view class='header-cell' wx:for='{{rankList}}' wx:key='cell'>
这是一个cell
</view>
</scroll-view> 

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;
}