小程序 自定义view以及某些属性使用方法

1.自定义dialog

//wxml文件
  <!--height弹窗-->
  <view class="modal-mask" bindtap="onCancel" catchtouchmove="preventTouchMove" wx:if="{{showModalH}}"></view>
  <view class="modal-dialog" wx:if="{{showModalH}}">
    <view class="modal-title">身高</view>
    <view class="modal-content">
      <view class="modal-check">
        <input placeholder-class="input-holder" focus='true' bindinput="bindKeyInputH" class="input2" placeholder="请输入"></input>
        <view style='margin-top: 20px'>CM</view>
      </view>
    </view>
    <view class="modal-footer">
      <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
      <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
    </view>
  </view>
</view>

//.wxss
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;

}

.modal-dialog {
  width: 80%;
  overflow: hidden;
  position: absolute;
  top: 30%; 
  z-index: 9999;
  background: #f9f9f9;
  border-radius: 36rpx;
  margin-left: 10%;
}


.modal-title {
  padding-top: 50rpx;
  font-size: 36rpx;
  color: #030303;
  text-align: center;
}

.modal-content {
  padding: 50rpx 32rpx;
}

.modal-input {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.modal-check{
  justify-content: center;
  display: flex;
  margin: 0 auto;
}

.input2 {
  width: 100rpx;
  height: 82rpx;
  line-height: 28rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #333;
  border-bottom: 2rpx solid #ddd;
  font-size: 28rpx;
  margin-top: 10px;
}
.input-holder {
  color: #666;
  font-size: 28rpx;
}
.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}
.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}
.btn-confirm {
  width: 50%;
  color: white;
  text-align: center;
  background-color:  rgb(9, 236, 236);
}

//.js
  hideModal: function () {
    this.setData({
      showModalH:false
    });

  },

  /**

   * 对话框取消按钮点击事件

   */

  onCancel: function () {
    this.hideModal();
  },
  /**

   * 对话框确认按钮点击事件

   */

  onConfirm: function () {
    this.hideModal();
  },

2. background-image使用
   微信小程序通过background-image设置背景：但是只支持线上图片或者base64图片，不支持本地图片；本地图片转换为base64图片可以用这个在线免费的网站工具。即把图片转换成了一个文本格式data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHWCAMAAAAfAvylAAAAkFBMVEVZpfFdqvJisPNks/RfrfNrvfdoufZmtvVuwfiKz/qO0vuJzfp7xviDyfmAyvlzyPpwxPl/yPmFzfp0tfaA2v50wPd3wvd81P1xvvd5xPiHzP......
   然后在wxss文件夹下设置即可：

.user-top{
  height:248px;
  border-bottom:1px solid #ccc;
  background-image: url("data:image/png;base64,iVBORw0KGg......ov28nt50G+SOIAAAAASUVORK5CYII=");
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}

• margin失效
  
  一开始，草绿色这块总是顶着两边，不管我是在当前view设置margin还是在上一层view设置margin，均无效。
  解决办法：用padding，在最外层view设置padding即可解决，得到上面的效果。

• 小程序引入非系统字体
  先准备好你所需要的字体，然后再在字体转换网站工具里进行转码；打开如下：
  
  生成的文件里可以直接找到stylesheet.css文件，改为font.wxss文件放到工程里，在所需要的wxss文件里引入@import '../../components/font/font.wxss';在对应的view中加入属性font-family: Alibaba Sans;
  备注 Alibaba Sans是font.wxss对应的名字。
  

5.字体ttf,eot,woff,svg介绍
字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

• TrueType
  Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
• EOT – Embedded Open Type (.eot)
  EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
• OpenType (.otf)
  OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
• WOFF – Web Open Font Format (.woff)
  WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
• SVG (Scalable Vector Graphics) Fonts (.svg)
  SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

推荐一个tff转换woff等的工具： www.fontsquirrel.com/tools/webfont-generator

6. 英文不分行
   在对应的view中添加属性word-break:break-all;

7. page IOS会横向移动
   禁止横向移动，添加属性：overflow-x:hidden;

8. scroll-view隐藏滚动条

/*隐藏滚动条*/

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