微信小程序旋转大师的代码是什么

微信小程序旋转大师的代码是什么,第1张

微信小程序旋转大师的代码是什么 - 百度知道

2个回答回答时间:2022年12月1日

最佳回答:微信小程序实现可实时改变转速的css3旋转动画实例代码,前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关...

百度知道

一、wx.setNavigationBarTitle

1.设置整个小程序通用标题,在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')

即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11283272.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存