小程序自定义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);
}

//.jshideModal: function () {this.setData({showModalH:false});},/*** 对话框取消按钮点击事件*/onCancel: function () {this.hideModal();},/*** 对话框确认按钮点击事件*/onConfirm: function () {this.hideModal();},

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

英文不分行
在对应的view中添加属性word-break:break-all;
page IOS会横向移动
禁止横向移动，添加属性：overflow-x:hidden;
scroll-view隐藏滚动条

/*隐藏滚动条*/::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

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

微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
微信小程序自定义组件的计算属性功能
1.behavior.js module.exports = Behavior({lifetimes: {created() {this._originalSetData = this.setData ...
微信小程序开发 Array对象的属性与方法
Array属性: length 设置或返回数组中元素的个数 Array 方法: concat():连接两个或更多的数组,并返回结果 join():把数组的所有元素放入字符串,并用指定的分隔符进行分隔 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序自定义组件/插件等解析
自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...
微信小程序自定义picker多列选择器
需求说明使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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