wx.showLoading({
title: '玩命加载中',
})
wx.hideLoading();
wx.showToast({
title: '没有更多数据',
})
//页面上拉加载更多
onReachBottom 当数据不够一屏幕时不会触发
控件(按钮)横向排列 wxss
.view_class {
display: flex;
flex-direction: row;
justify-content: center;
}
控件(按钮)纵向排列 wxss
view_class {
display: flex;
flex-direction: column;
justify-content: center;
}
console.log("控制台打印输出");
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
for(var i = 0; i < _this.data.array.length; i++){
}
//跳转传json参数
wx.navigateTo({
url: '/pages/register/organname?orgType=' + this.data.orgType + '®ion=' + JSON.stringify(this.data.region),
})
JSON.parse(arrJosn);
"navigationStyle": "custom" 去除title
url: '/pages/faceinfo/facepreview?tag=' + "1",
//返回上级页面,默认返回1级
wx.navigateBack();
wx.navigateBack({
//返回级数设置
delta: 2
});
校园版小程序 AppID(小程序ID) wx1a6abf2f8d546a7e
https://www.yasuotu.com/ 图片无损压缩
disabled="false"
小程序分包
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/detail"
]
}
],
validation: function(values) {
if (values.name === '') {
this.data.error = '姓名不能为空';
return false;
}
}
// 表单验证
if (!_this.validation(values)) {
App.showError(_this.data.error);
return false;
}
//设置不可点击
disabled="{{disabled}}"
//滚动默认选项设置 value就可以了
<picker mode="multiSelector" bindchange="bindPickerTime" value="{{index5}}" range="{{timeArray}}">
<input class="text-msg view-msg-color" disabled="false" placeholder-style="color:#009ad6;" name="operateTime" value="{{timeStr}}" placeholder="请选择"></input>
</picker>
//点击事件
bindtap=""
//数据回传上个页面
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
prevPage.setData({
deptId: _this.data.deptId,
deptName: _this.data.deptName,
deptNo: _this.data.deptNo
});
//删除指定数组项 splice参数说明 第一个参数是数据下标,第二个参数是删除数量
_this.data.personList.splice(i,1);
//取出对象的键
Object.keys(对象)[0]
//取出对象的值
Object.values(对象)[0]
wx1a6abf2f8d546a7e
wx.setStorageSync(同步缓存)wx.getStorageSync(取数据)
wx.setStorage(异步缓存)wx.getStorage(取数据)
catchtap 如果在这个控件下面子控件还有点击,会阻止子控件执行点击
bindtap 如果在这个控件下面子控件还有点击,不会阻止子控件执行点击
delete values.键值 剔除对象中不需要的参数;
//字符串转数组
var words = words.split(","); //转成数组类似php的explode函数
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
//图片旋转
<view class="container">
<view class="page-body">
<view class="page-section">
<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="startAnimationInterval">旋转</button>
<button class="animation-button" bindtap="stopAnimationInterval">暂停</button>
<button class="animation-button" bingtap=""></button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>
</view>
</view>
</view>
var _animation; // 动画实体
var _animationIndex = 0; // 动画执行次数index(当前执行了多少次)
var _animationIntervalId = -1; // 动画定时任务id,通过setInterval来达到无限旋转,记录id,用于结束定时任务
const _ANIMATION_TIME = 60; // 动画播放一次的时长ms
Page({
data: {
animation: ''
},
onReady: function () {
_animationIndex = 0;
_animationIntervalId = -1;
this.data.animation = '';
},
onShow: function () {
_animation = wx.createAnimation({
duration: _ANIMATION_TIME,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0'
})
},
/**
* 实现image旋转动画,每次旋转 1 * n度
*/
rotateAni: function (n) {
_animation.rotate(1 * (n)).step()
this.setData({
animation: _animation.export()
})
},
/**
* 开始旋转
*/
startAnimationInterval: function () {
var that = this;
that.rotateAni(++_animationIndex); // 进行一次旋转
_animationIntervalId = setInterval(function () {
that.rotateAni(++_animationIndex);
}, _ANIMATION_TIME); // 每间隔_ANIMATION_TIME进行一次旋转
},
/**
* 停止旋转
*/
stopAnimationInterval: function () {
if (_animationIntervalId > 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
})
setTimeout(function () {
console.log("----Countdown----");
}, 1000);
获取控件的高度是px, 再乘以750转换成rpx
page{
height:100%;//这样你在页面中的view设置height:100%就起作用了
}
view{
height:100vh;//相对于视口的高度。视口被均分为100单位的vh,100vh就是充满整个屏幕了
}
//view一个设置了高度,另一个填满剩下空间
page{
height:100%;
display: flex;
flex-direction: column;
background: #6e6d6b;
}
.view-1{
background: #ff9900;
}
.view-2{
background: blue;
flex: 1;
align-items: center;
justify-content: center;
display: flex;
}
微信小程序开发中bindtap和catchtap的区别
父元素使用 bindtap 绑定事件后,子元素也用 bindtap 绑定事件。
那么当触发子元素事件时,我们发现同时也触发使用 bindtap 绑定事件的父元素事件。
如果我们需求只要触发子元素事件,那么我们可以在子元素中用 catchtap 代替 bindtap 去绑定事件。
//微信小程序CheckBox样式修改
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
width: 40rpx;
height: 40rpx;
float: left
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: none;
background: rgba(65,163,250,1);
}
/* 选中后的 对勾样式 (白色对勾 可根据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; /* 对勾大小 30rpx */
color:#fff; /* 对勾颜色 白色 */
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
字体划线效果
<view style='font-size:14px;'>
原价:
<text style='color:#FF6F10;text-decoration:line-through;'> 9.00 </text>
</view>
1 /**index.wxss**/
2 .content{
3 height: 600px;
4 display: flex;
5 flex-direction: column;
6 }
1 <!--index.wxml-->
2 <view class="content">
3 <view style="flex:1;width:100%;background-color:green">box1</view>
4 <view style="flex:1;width:100%;background-color:blue">box2</view>
5 <view style="flex:1;width:100%;background-color:yellow">box3</view>
6 </view>
<text class="time">0:00</text>
<view class="btns">
<image class="preBtn" bindtouchstart="touchPreBtn" bindtouchend="pre" src="/images/play-last.png" mode="aspectFit">⋘</image>
<image class="playBtn" bindtouchstart="touchPlayBtn" bindtouchend="playOrpause" src="/images/play.png" mode="aspectFit"></image>
<image class="nextBtn" bindtouchstart="touchNextBtn" bindtouchend="next" src="/images/play-next.png" mode="aspectFit">⋙</image>
</view>
str="1_abcdefg" //字符串,想要的是以下划线截取前后的字符
s = str.indexOf('_') //找到第一次出现下划线的位置
str_new 1= str.substring(0,s ) //取下划线前的字符
str_new 1= str.substring(s+1) //取下划线后的字符