2个回答回答时间:2022年12月1日
最佳回答:微信小程序实现可实时改变转速的css3旋转动画实例代码,前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关...
百度知道
一、wx.setNavigationBarTitle1.设置整个小程序通用标题,在app.json里设置:
"window": {
"navigationBarTitleText": "默认标题"
}
复制
2.单独设置页面标题,在对应页面json文件里设置(子页面设置会覆盖通用设置):
{
"navigationBarTitleText": "首页"
}
复制
3.动态设置,比如说:我们从接口拿到商品名称后,把商品名称设置到标题上
wx.request({
url: "请求接口url",
method: "POST",
data: {},
success: function (res) {
if (res.data.code == 200) {
// 修改navigationBarTitleText
wx.setNavigationBarTitle({
title: goods_name
})
}
}
})
复制
tips:动态设置 >页面独立设置 >通用设置
效果图:
当然,另外我们可以通过点击事件来动态设置标题:
test: function () {
wx.setNavigationBarTitle({
title: "我是点击后的标题"
})
}
复制
效果图:
二、wx.setNavigationBarColor
设置页面导航条颜色
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
复制
frontColor:前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
backgroundColor:背景颜色值,有效值为十六进制颜色
animation:动画效果
①animation的结构包括:duration,timingFunc;
②timingFunc:linear(动画从头到尾的速度是相同的),easeIn(动画以低速开始),easeOut(动画以低速结束),easeInOut(动画以低速开始和结束)
效果图:
三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading
wx.showNavigationBarLoading:在当前页面显示导航条加载动画
wx.hideNavigationBarLoading:在当前页面隐藏导航条加载动画
index.wxml
<button bindtap="showLoading">显示加载动画</button>
<button bindtap="hideLoading">隐藏加载动画</button>
复制
index.js
// 显示加载动画
showLoading: function () {
wx.showNavigationBarLoading()
},
// 隐藏加载动画
hideLoading: function () {
wx.hideNavigationBarLoading()
}
复制
效果图:
四、wx.hideHomeButton
隐藏返回首页按钮。微信7.0.7版本起,当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。
目前总结解决方法:同时需要设置模块的函数,函数都可放置在util.js中去。
首先:
一、在util.js中放入如下两组函数
1. 设置点击后多久不能再次 *** 作该
function throttle(fn, gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
// 返回新的函数
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime >gapTime || !_lastTime) {
fn.apply(this, arguments) //将this和参数传给原函数
_lastTime = _nowTime
}
}
}
2. 设置加载动画
function showLoading(message) {
if (wx.showLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
wx.showLoading({
title: message, mask: true
})
} else { // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
wx.showToast({
title: message, icon: 'loading', mask: true, duration: 20000
})
}
}
function hideLoading() {
if (wx.hideLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
wx.hideLoading()
} else {
wx.hideToast()
}
}
并且将其导出作为页面使用:
module.exports = {
throttle: throttle,
showLoading: showLoading,
hideLoading: hideLoading,
}
二、将函数引入页面使用
const util = require('../../utils/util.js')
即可。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)