CSS input 设置宽高margin及padding对齐
input经常无法与其他元素对齐,通常用外层来包裹input,设置外层样式CSS,如依旧无法达到理想的效果,只能将input块级元素化
1、给input添加CSS属性:display:block
添加display将元素显示为块级元素,前后会带有换行符,用float来排列input
2、给input添加CSS属性:display:inline-block
将元素显示为行内块元素,上下对齐用CSS:vertical-align: bottom; 底部对齐
笔记
·
CSS中Position:fixed偏移解决方案
Position:fixed,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
Position:fixed,在实际使用过程中多少都会遇到偏移的问题。虽然说 Position:fixed是相对于浏览器进行定位的,有时候也会受到外层DIV的影响,在非IE下, Position:fixed,浮动时是水平位置是相对于外层的。如果需要水平居中,可以设置left:50%,margin-left:- Position:fixed /2,即本身宽度的一半。其实,CSS位置的设置逻辑还和数学真有点关系!当然,可以设置一个居中层,margin:0 auto;外层,内层进行 Position:fixed,也会水平居中。同样也实用于IE浏览器。
不过,对于非水平居中的,比如侧栏浮动,可以加个同样大小的DIV外层,一来可以在外层添加一个ID,以便JS scrollTop 来识别。二来,可以在position:fixed后保留位置,以便在高度不够特别是临界的情况下还能保持原来的高度。
Position:fixed,虽然是相对于浏览器定位的,但是,在判断滚动条而进行是否需要 Position:fixed的,可以添加一个外层给一个水平位置的定位,防止因添加了 Position:fixed后,IE下,层进行了左右的偏移
随笔
·
微信小程序scroll-view下拉刷新,出现一直刷新
用scroll-view,主要原因是,可以在顶部固定一个模块,虽然position:fixed可以实现,但发现在真机上总会出现一条小白条,看着不是很舒服
scroll-view下拉刷新,需要用到几个属性:scroll-view官方说明
refresher-enabled:开启自定义下拉刷新
refresher-threshold:设置自定义下拉刷新阈值
refresher-default-style:设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式
refresher-background:设置自定义下拉刷新区域背景颜色
refresher-triggered:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
主要是:refresher-triggered,当值为FALSE时,关闭刷新,默认值是FALSE,原先一直在设置复位:TRUE,所以一直刷新,改FALSE后,才解决
下拉刷新:
bindrefresherrefresh: function (e) {
let that = this;
wx.showLoading({
title: '正在刷新...',
mask: true,
})
that.setData({
page: 1
})
that.GetData()
},
下拉刷新复位
bindrefresherrestore: function (e) {
let that = this;
that.setData({
refresher: false,
})
},
而开始一直设置refresher值为true!
笔记
·
微信小程序scroll-view禁止滚动条
微信小程序禁用scroll-view滚动条
::-webkit-scrollbar {
display: none;
}
其实也简单,就是这样一个CSS样式,关键是这个样式要放在哪里!
在写的时候,一直无法生效,翻看之前写的,也是一样的,但之前的可以生效!
认真翻看才发现,这个要在在app.wxss里,并不是写在页面上!如果怕兼容,可以全部都写上
::-webkit-scrollbar {
display:none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
以前就是因为全部都写上,在翻看时,一直都没有去翻app.wxss!
笔记
·
微信小程序开发新版本检测、网络请求、json格式判断封装
微信小程序开发新版本检测、网络请求、json格式判断封装,放在APP.JS
App({})
里,方便各个页面调用
1、小程序新版本检测
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) {
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
})
})
}
})
}
2、网络数据请求
request: function (url, data = false, callback) {
wx.request({
url: url,
data: data,
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
if (res.statusCode != 200) {
return callback && callback(false);
} else {
return callback && callback(res.data);
}
},
fail: function (res) {
return callback && callback(false);
}
})
}
页面调用:
app.request(url, false, (res) => {})
3、JSON格式检测
isJson: function (string) {
try {
if (typeof JSON.parse(string) == 'object') {
return true;
}else{
return false;
}
} catch (e) {
// console.log(e);
return false;
}
}
笔记
·
Zero零分
站龄15年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
476
文章 26
评论 27
分类 839
标签 7
友链
文章 26
评论 27
分类 839
标签 7
友链
百度广告
最近更新
- 01 微信小程序scroll-view下拉刷新,出现一直刷新
- 02 微信小程序scroll-view禁止滚动条
- 03 微信小程序开发新版本检测、网络请求、json格式判断封装
- 04 利用Fiddler抓包工具下载微信视频号视频
- 05 整理了一张吴宗宪专辑无损CD《无尽的爱》APE格式音频
- 06 百度AI语音演示接口后获取的音频流处理
- 07 Win7 安装pr2018(AdobePremiereCC2018)记录说明
- 08 win7无法查看gif动画图解决插件Image_Viewer_for_Windows_7
- 09 win7 视频无法预览图片(文件夹内不显示略缩图)
- 10 微信小程序解决上滑多次加载重复内容的问题
热门推荐
最新评论
标签云
微信小程序
小程序开发
视频下载
Fiddler
微信视频号
无损CD
无尽的爱
吴宗宪
文字转语音
百度ai
pr2018
win7
Image Viewer for Windows 7
win7查看GIF
视频预览图片
视频略缩图
视频解码器
fireworks
水星
移动热点
ps ico
ps插件
foreach
php
保存远程图片
登录过期
phpmyadmin
扩展屏
多显示器
自动登陆
netplwiz
CSS动画
wordpress图片
sitemap
无线端
调试
a标签
P标签
calc
justify
pycharm
Python
相邻文章
logo
赵薇
html
win11
Windows
扫黑风暴
我的饭店
淘花
游艇
港姐
周星驰
unisoc
荣耀paly5
信用卡
AI机器人
华智冰
小冰
评论功能已经关闭!