第61次推文
贺贺
LZ-Says:不走,总会被逼着走。想要拥有 Change 的权利,背后需要付出更多_____
前言
小程序断断续续搞了有一段时间了,发现在某些情况下,第一次消耗 30 分钟,而后则几分钟即可。
短暂微小做一个积累,也希望帮助有需要的小伙伴~
一起来看关于小程序常用事例
话不多说,立刻开搞~
一、实现底部 Tab 栏
"tabBar": {
"color": "#515151",
"selectedColor": "#01509F",
"list": [
{
"pagePath": "pages/index/index",
"text": "预约",
"iconPath": "/images/tab_yuyue.png",
"selectedIconPath": "images/tab_yuyue_selected.png"
},
{
"pagePath": "pages/records/records",
"text": "记录",
"iconPath": "/images/tab_record.png",
"selectedIconPath": "/images/tab_record_selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/images/tab_mine.png",
"selectedIconPath": "/images/tab_mine_selected.png"
}
]
}
二、 设置 Button 透明无边框
.price_detail .img_info button::after {
border: none;
}
.price_detail .img_info button {
background: none;
}
三、 设置 CheckBox 样式为圆形 ⭕️
/* 重写 checkbox 样式 */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
border-radius: 50%;
width: 46rpx;
height: 46rpx;
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input .wx-checkbox-input-checked {
border: 1rpx solid #ff783b;
background: #ff783b;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
checkbox .wx-checkbox-input .wx-checkbox-input-checked ::before {
border-radius: 50%;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
/* 对勾颜色 白色 */
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
效果如下:
四、 Text 文本内显示空格
先来看下效果:
使用全角空格即可,Mac 上使用方式如下:
<van-field clearable label="微 信" placeholder="请输入微信号码" />
五、 点击左上角返回直接返回首页
方式一:
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
wx.navigateBack({
delta: 6
})
},
方式二:
/**
* 返回首页
*/
goBackHome: function() {
wx.switchTab({
url: '/pages/index/index',
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
wx.switchTab({
url: '/pages/index/index',
})
},
六、 跳转传值
传值方式:
<navigator url='/pages/order/order?type=4'>
<view>
<image src='../../images/ic_pay_error.png' />
<text>已退款</text>
</view>
</navigator>
接受值方式如下:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log("Get Value:" + options.type)
},
官方地址: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
七、 兼容 iPhone X
附上一张未兼容和已兼容的效果图:
适配步骤:
Step 1: App.js 中检测当前设备是否为 iPhone X
globalData: {
// 是否为 iPhoneX 以上版本
isIphoneX: false
},
/**
* 检测当前设备是否为 iPhone X 及以上
*/
checkIsiPhoneX: function() {
const self = this
wx.getSystemInfo({
success: function(res) {
// 根据 model 进行判断
if (res.model.search('iPhone X') != -1) {
self.globalData.isIphoneX = true
}
// 或者根据 screenHeight 进行判断
// if (res.screenHeight == 812) {
// self.globalData.isIphoneX = true
// }
}
})
},
onLaunch: function() {
// 判断设备是否为 iPhone X 及以上
this.checkIsiPhoneX()
}
Step 2:设置兼容以及普通机型下的样式
/* 提交按钮 */
.submit_btn {
background: #d04801;
color: #fff;
border-radius: 50rpx;
margin: 30rpx;
font-size: 32rpx;
padding: 15rpx;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
/* 点击效果 */
.submit_btn:active {
opacity: 0.6;
}
/* 提交按钮 iPhone X */
.submit_btn_iPhoneX {
margin-bottom: 68rpx;
}
Step 3:具体的 Page.js 中匹配
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
isIphoneX: app.globalData.isIphoneX,
},
}
Step 4:未指定的控件设置对应的样式兼容
<button class="{{ isIphoneX ? 'submit_btn submit_btn_iPhoneX' :'submit_btn'}}" bindtap="{{phone.length ? 'confirmOrder' : ''}}" open-type="{{phone.length ? '' : 'getPhoneNumber'}}" bindgetphonenumber='bindgetphonenumber'>下一步</button>
以上内容参考自如下链接:
欢迎各位老铁关注~不定期发布~见证你我的成长路~!!!
觉得不错,动动小手,转发让更多人看到,3Q,比心~
顺便点个在看呗~