widthfix多适用于通栏,width:100%,高度不同设备自适应的情况。此时会按照原图比列自动缩放高度,常用于轮播图。
aspectFill多用用在固定大小的范围内显示,区别是可以保留一边,除去通栏外一般用处较多。
个别情况下需要图片始终居中缩放,多用在用户头像圆环之类,一般留在保留中心内容的部分,文档中暂没,需要单独设置。
小程序实现满屏上下滑动效果写的时候发现网上没有好用的,要么过于复杂,要么不太实用,我就自己整了个简单的
直接上代码部分
//wxml部分
<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">
<swiper-item wx:for="{{images}}">
<image src="{{item}}" mode="scaleToFill"></image>
</swiper-item>
</swiper>
下面是js部分,大部分都是自动生成的函数,只要在data里面存放图片地址就行,其他的可以不用管
// pages/template/template.js
Page({
/**
* 页面的初始数据
*/
data: {
images: ["/pages/template/images/1.png","/pages/template/images/2.png","/pages/template/images/3.png","/pages/template/images/4.png"]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图
iphone5表现效果
在这里插入图片描述
iphone 12/13 Pro Max表现效果
在这里插入图片描述
本人前端一般般,可能会有问题,仅供参考
mode 属性:默认值:scaleToFill —- 不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签
aspectFit —- 保持纵横比例缩放图片,使图片的长边能够完全显示出来,也就说图片可以完整的显示出来
aspectFill —– 保持纵横比例缩放图片,只保证图片的短边能够完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
top —- 不缩放图片,只显示图片的顶部区域
bottom —- 不缩放图片,只显示图片的底部区域
center —- 不缩放图片,只显示图片的中间区域
left —- 不缩放图片,只显示图片的左边区域
right —– 不缩放图片,只显示图片的右边区域
top left —- 不缩放图片,只显示图片的左上边区域
top right —- 不缩放图片,只显示图片的右上边区域
bottom left —- 不缩放图片,只显示图片的左下边区域
bottom right —- 不缩放图片,只显示图片的右下边区域
4.隐藏NavigationBar
5.VM11106:1 Do not have login handler in current page: pages/login/login. Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into app.json
解决方案:
2.调整app.json中Pages里面的页面注册顺序 ;
3.检查wxml中bindtap是否在js里面将方法创建。
6.switch样式大小调整
大家都知道微信官方提供的switch 能改变color 但是改变大小 常用的width height 不起作用
但是可以这样修改
7.input 不沾满屏幕右侧有留白
使用flex布局的时候明明 input style 设置了flex=1 的属性 可是input还是站不满整个屏幕的宽度,右侧有留白,文字被遮挡, 不知道是不是一个bug,
解决方案: 在input外面包一层view style设置flex=1 用于沾满整个屏幕 input用于显示文字
————————————————
1.display取值
2.float(取值:left,right,none,inherit。)
3.clear:该属性指出不允许有浮动对象的边。(取值:left,right,both,none.)
4.visibility:是否显示对象(取值:visible,hidden,collapse。)
5.overflow:处理溢出内容的方式。(取值:visible,hidden,scroll,auto。)
其他属性:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)