首页 / JAVASCRIPT / 微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序实现下拉菜单切换效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含14529字，纯文字阅读大概需要21分钟。

内容图文

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码，供大家参考，具体内容如下

效果图：

微信小程序实现下拉菜单切换效果 - 文章图片

wxml：

<!-- 下拉菜单 -->
 <view id="swiper-tab">
 <view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{first}}
  <i></i>
  </view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">{{second}}
  <i></i>
  </view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">{{thirds}}
  <i></i>
  </view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="tabNav">{{fours}}
  <i></i>
  </view>
 </view>
 <swiper current="{{currentTab}}" duration="1000" class="swiper-item" style='display:{{displays}}'>
  <swiper-item>
  <view>
   <view class='qiehuannier'>
   <view class="nav bc_white">
    <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
    <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
    <view class="{{selected2?'red':'default'}}" bindtap="selected2">优惠活动</view>
   </view>
   <view id="rights">
    <view class="{{selected?'show':'hidden'}}">
    <view class="{{_sum == 1?'add_adress':'add_city'}}" data-num="1" bindtap="clickSum" data-name="北京">北京</view>
    <view class="{{_sum == 2?'add_adress':'add_city'}}" data-num="2" bindtap="clickSum" data-name="上海">上海</view>
    <view class="{{_sum == 3?'add_adress':'add_city'}}" data-num="3" bindtap="clickSum" data-name="上海">上海</view>
    <view class="{{_sum == 4?'add_adress':'add_city'}}" data-num="4" bindtap="clickSum" data-name="上海">上海</view>
    <view class="{{_sum == 5?'add_adress':'add_city'}}" data-num="5" bindtap="clickSum" data-name="上海">上海</view>
    <view class="{{_sum == 6?'add_adress':'add_city'}}" data-num="6" bindtap="clickSum" data-name="上海">上海</view>
    </view>
    <view class="{{selected1?'show':'hidden'}}">
    <view class="{{_mum == 1?'add_adre':'add_city'}}" data-num="1" bindtap="clickMum" data-name="北京">北京</view>
    <view class="{{_mum == 2?'add_adre':'add_city'}}" data-num="2" bindtap="clickMum" data-name="上海">上海</view>
    <view class="{{_mum == 3?'add_adre':'add_city'}}" data-num="3" bindtap="clickMum" data-name="上海">上海</view>
    <view class="{{_mum == 4?'add_adre':'add_city'}}" data-num="4" bindtap="clickMum" data-name="上海">上海</view>
    </view>
    <view class="{{selected2?'show':'hidden'}}">
    <view class="{{_cum == 1?'add_ad':'add_city'}}" data-num="1" bindtap="clickCum" data-name="北京">北京</view>
    <view class="{{_cum == 2?'add_ad':'add_city'}}" data-num="2" bindtap="clickCum" data-name="上海">上海</view>
    <view class="{{_cum == 3?'add_ad':'add_city'}}" data-num="3" bindtap="clickCum" data-name="上海">上海</view>
    </view>
   </view>
   </view>
  </view>
  </swiper-item>
  <swiper-item>
  <view class="location_bottom" hidden="">
   <view class="{{_num == 1?'add_citying':'add_city'}}" data-num="1" bindtap="clickNum" data-name="北京">北京</view>
   <view class="{{_num == 2?'add_citying':'add_city'}}" data-num="2" bindtap="clickNum" data-name="上海">上海</view>
   <view class="{{_num == 3?'add_citying':'add_city'}}" data-num="3" bindtap="clickNum" data-name="上海">上海</view>
   <view class="{{_num == 4?'add_citying':'add_city'}}" data-num="4" bindtap="clickNum" data-name="上海">上海</view>
   <view class="{{_num == 5?'add_citying':'add_city'}}" data-num="5" bindtap="clickNum" data-name="上海">上海</view>
   <view class="{{_num == 6?'add_citying':'add_city'}}" data-num="6" bindtap="clickNum" data-name="上海">上海</view>
   <view class="{{_num == 7?'add_citying':'add_city'}}" data-num="7" bindtap="clickNum" data-name="上海">上海</view>
  </view>
  </swiper-item>
  <swiper-item>
  <view class="location_bottom" hidden="">
   <view class="{{_res == 1?'add_House':'add_city'}}" data-num="1" bindtap="clickHouse" data-name="北京">北京</view>
   <view class="{{_res == 2?'add_House':'add_city'}}" data-num="2" bindtap="clickHouse" data-name="北京">上海</view>
   <view class="{{_res == 3?'add_House':'add_city'}}" data-num="3" bindtap="clickHouse" data-name="北京">上海</view>
   <view class="{{_res == 4?'add_House':'add_city'}}" data-num="4" bindtap="clickHouse" data-name="北京">上海</view>
   <view class="{{_res == 5?'add_House':'add_city'}}" data-num="5" bindtap="clickHouse" data-name="上海">上海</view>
   <view class="{{_res == 6?'add_House':'add_city'}}" data-num="6" bindtap="clickHouse" data-name="北京">上海</view>
   <view class="{{_res == 7?'add_House':'add_city'}}" data-num="7" bindtap="clickHouse" data-name="北京">上海</view>
  </view>
  </swiper-item>
  <swiper-item class="shaixuankuang">
  <view class="shaixuan">
   <span class="shuaixuantiaojian">面积</span>
   <block wx:for="{{array}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == one?' border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
   <view class="zidingyi">
   <span>自定义面积:</span>
   <input class="front" type='text'></input>
   <p>-</p>
   <input class="back" type='text'></input>
   <button>设置</button>
   </view>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">朝向</span>
   <block wx:for="{{chaoxiang}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="chaoxiang" style="{{index == two?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
 
  <view class="shaixuan">
   <span class="shuaixuantiaojian">楼层</span>
   <block wx:for="{{louceng}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="louceng" style="{{index == third?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">装修</span>
   <block wx:for="{{zhuangxiu}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="zhuangxiu" style="{{index == four?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">建筑类别</span>
   <block wx:for="{{leibei}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="leibei" style="{{index == five?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">特色</span>
   <block wx:for="{{tese}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="tese" style="{{index == six?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">排序</span>
   <block wx:for="{{paixu}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="paixu" style="{{index == seven?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="qingkong">
   <span class="tianjian" bindtap="qingchu">清除条件</span>
   <p class="queren" bindtap="queren">确认</p>
  </view>
  </swiper-item>
 </swiper>
 </view>
 <view class="swiper-beijing" bindtap="hideNav" style='display:{{displays}}'></view>

wxss：

/*下拉菜单 */
 
/* 下面是tobar */
 
#swiper-tab {
 width: 100%;
 position: relative;
}
 
.swiper-tab {
 width: 100%;
 text-align: center;
 line-height: 80rpx;
 background-color: white;
}
 
.swiper-tab-list {
 font-size: 30rpx;
 display: inline-block;
 width: 25%;
 color: #666;
 border-bottom: 0rpx;
 position: relative;
}
 
.swiper-tab-list i {
 position: absolute;
 bottom: 30%;
 right: 14%;
 width: 0px;
 height: 0px;
 border: 5px solid #4e4e4e;
 border-top-color: #4e4e4e;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
 
.on {
 color: #f63;
 border-bottom: 2rpx solid #f63;
}
 
.on i {
 border: 5px solid #f63;
 border-top-color: #f63;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
 
.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
 
.swiper-box view {
 text-align: center;
}
 
.swiper-item {
 background: #fff;
 width: 100%;
 height: 600rpx;
 display: none;
 position: absolute;
 top: 100rpx;
 z-index: 333333;
 left: 0;
 animation: displays 1s;
}
 
@keyframes displays {
 from {
 height: 0px;
 }
 
 to {
 height: 600rpx;
 }
}
 
.swiper-beijing {
 width: 100%;
 height: 200%;
 background: #000;
 opacity: 0.5;
 position: absolute;
 top: 130px;
 left: 0;
 display: none;
 z-index: 888;
 animation: 1s;
}
 
 
/* 下拉切换中的切换 */
 
.nav {
 width: 20%;
 height: 100rpx;
 float: left;
 flex-direction: row;
}
 
.default {
 width: 100%;
 line-height: 100rpx;
 text-align: center;
 color: #000;
 font-weight: bold;
 font-size: 28rpx;
 overflow: hidden;
}
 
.red {
 width: 100%;
 float: right;
 line-height: 100rpx;
 text-align: center;
 color: #f63;
 font-weight: bold;
 font-size: 28rpx;
}
 
.show {
 display: block;
 text-align: center;
 line-height: 200rpx;
}
 
.hidden {
 display: none;
 text-align: center;
 line-height: 200px;
}
 
#rights {
 width: 79%;
 float: right;
 border-left: solid 1px #eee;
 font-size: 15px;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
 
/*添加class改变样式 */
 
.location_bottom {
 width: 100%;
 height: 400rpx;
 line-height: 140rpx;
 color: #d91f16;
 font-size: 28rpx;
 padding: 0 20rpx;
 align-items: center;
}
 
.add_city {
 width: 90%;
 display: block;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #ebebeb;
 color: #000;
 padding-left: 5%;
}
 
.add_adress {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_adre {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_citying {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
.add_House {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
 
/*// 筛选 */
 
.shaixuankuang {
 width: 100%;
 height: 600rpx;
 overflow: hidden;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
 
.shaixuan {
 width: 100%;
 height: auto;
 overflow: hidden;
}
 
.shuaixuantiaojian {
 width: 95%;
 padding: 0 2.5% 1%;
 display: block;
 font-size: 15px;
 color: #999;
}
 
.chose-txt {
 /* border-radius: 6px; */
 font-size: 26rpx;
 width: 29%;
 margin: 4px 14rpx;
 float: left;
}
 
.chose-p {
 line-height: 25px;
 width: 100%;
 height: 25px;
 text-align: center;
 float: left;
}
 
.zidingyi {
 width: 95%;
 height: 50px;
 margin: 0 auto;
 overflow: hidden;
}
 
.zidingyi span {
 float: left;
 font-size: 16px;
 line-height: 40px;
 color: #666;
 margin-right: 15rpx;
}
 
.zidingyi input {
 width: 50px;
 padding-left: 10rpx;
 float: left;
 margin-top: 10rpx;
 font-size: 15px;
 line-height: 40px;
 border: solid 1px #eee;
 color: #666;
}
 
.zidingyi p {
 float: left;
 margin: 0 15rpx;
 line-height: 40px;
 color: #666;
}
 
.zidingyi button {
 height: 28px;
 float: left;
 margin: 10rpx 0 0 25rpx;
 font-size: 13px;
 line-height: 28px;
 /* border: solid 1px #eee; */
 color: #666;
}
 
.qingkong {
 width: 95%;
 height: 40px;
 margin: 40rpx auto 30rpx;
}
 
.qingkong span {
 float: left;
 width: 35%;
 height: 33px;
 border: 1px solid #eee;
 box-sizing: border-box;
 color: #666;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 33px;
 border-radius: 3px;
}
.qingkong p{
 float: right;
 width: 55%;
 height: 35px;
 color: #fff;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 35px;
 background: rgba(229,65,65,0.95);
 border-radius: 3px;
}

js：

//banner
Page({
 data: {
 // 下拉菜单
 first: '区域',
 second: '售价',
 thirds: '房型',
 fours: '筛选',
 _num: 0,
 _res: 0,
 
 // 筛选
 array: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 chaoxiang: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 louceng: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 zhuangxiu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 leibei: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 tese: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 paixu: [{ name: '单拍' }, { name: '亲子套餐' }, { name: '活动套餐' }, { name: '女王套餐' }],
 one: 0,
 two: 0,
 third: 0,
 four: 0,
 five: 0,
 six: 0,
 seven: 0,
 },
 isShow: true,
 currentTab: 0,
 
 // 下拉切换
 hideNav: function () {
 this.setData({
  displays: "none"
 })
 },
 // 区域
 tabNav: function (e) {
 this.setData({
  displays: "block"
 })
 this.setData({
  selected1: false,
  selected2: false,
  selected: true
 })
 if (this.data.currentTab === e.target.dataset.current) {
  return false;
 } else {
 
  var showMode = e.target.dataset.current == 0;
 
  this.setData({
  currentTab: e.target.dataset.current,
  isShow: showMode
  })
 }
 },
 // 下拉切换中的切换
 // 区域
 selected: function (e) {
 this.setData({
  selected1: false,
  selected2: false,
  selected: true
 })
 },
 selected1: function (e) {
 this.setData({
  selected: false,
  selected2: false,
  selected1: true
 })
 },
 selected2: function (e) {
 this.setData({
  selected: false,
  selected1: false,
  selected2: true
 })
 },
 // 下拉菜单1 2 3 4
 // 区域
 clickSum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
  _sum: e.target.dataset.num
 })
 this.setData({
  first: e.target.dataset.name
 })
 this.setData({
  displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 clickMum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
  _mum: e.target.dataset.num
 })
 this.setData({
  displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 clickCum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
  _cum: e.target.dataset.num
 })
 this.setData({
  displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 // 售价
 clickNum: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
  _num: e.target.dataset.num
 })
 this.setData({
  second: e.target.dataset.name
 })
 this.setData({
  displays: "none"
 })
 var text = this.data.name
 console.log(text)
 },
 onLoad: function (options) {
 
 },
 // 房型
 clickHouse: function (e) {
 console.log(e.target.dataset.num)
 this.setData({
  _res: e.target.dataset.num
 })
 this.setData({
  thirds: e.target.dataset.name
 })
 this.setData({
  displays: "none"
 })
 },
 onLoad: function (options) {
 
 },
 
 // 筛选
 choseTxtColor: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 console.log(e.currentTarget.dataset.id)
 this.setData({
  one: id
 })
 },
 chaoxiang: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  two: id
 })
 },
 louceng: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  third: id
 })
 },
 zhuangxiu: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  four: id
 })
 },
 leibei: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  five: id
 })
 },
 tese: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  six: id
 })
 },
 paixu: function (e) {
 var id = e.currentTarget.dataset.id; //获取自定义的ID值 
 this.setData({
  seven: id
 })
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的微信小程序实现下拉菜单切换效果全部内容，希望文章能够帮你解决微信小程序实现下拉菜单切换效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/334362.html

来源：【匿名】

【上一篇】微信小程序实现自动定位功能【下一篇】javascript 怎么调用php方法

更多 ►

【微信小程序实现下拉菜单切换效果】教程文章相关的互联网学习教程文章

微信小程序缓存过期时间的使用详情

关于本地缓存 1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) wx.removeStorage(OBJECT) wx.setStorageSync(KEY,DATA) wx.getStorageSync(KEY) wx.getStorageInfoSync wx.c...

详解微信小程序缓存--缓存时效性

微信小程序如何修改本地缓存key中单个数据的详解【图】

最近在做教师评教系统，有一个‘个人信息页面中有个编辑修改邮箱的功能，本来想得很简单，结果进坑了，搞了好久才出来。我想实现的效果是点击下图左侧邮箱，然后进入右侧页面，进行邮箱的修改，点击提交后跳转到左侧页面，同时邮箱也发生改变。点击‘我的时，我让它从控制台打印出student缓存中传过来的数据，如下： {no: "1635050601", name: "张三", sex: "", email: "123@qq.com", classid: "100000-1602", …} classid:"10000...

微信小程序缓存（本地缓存、异步缓存、同步缓存）详解

微信小程序缓存关于本地缓存 1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储一、异步缓存 wx.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容 wx.setStorage({key:"key",data:"value"})wx.getStorage(OBJECT) 从本地缓存中异...

微信小程序-详解数据缓存【图】

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。 wx.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的...

微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考，具体如下： wxml中的写法注意： 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果； 2. 为图片绑定点击事件bindtap="toCollect"，两个image标签都要绑定！ <image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image> <image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>js中的写法...

微信小程序之数据缓存的实例详解【图】

微信小程序之数据缓存的实例详解前言：在H5之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，H5增加了新的缓存机制，即localstorage 和 sessionstorage，具体的介绍就不在多说。在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。效果图展示：我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下： index页...

微信小程序实现缓存根据不同的id来进行设置和读取缓存【图】

本文是根据不同的id来进行设置和读取缓存，是同步缓存的方式： jonNums.count 是接口返回的数据是报名总人数newNumber 新的报名总人数 - 缓存上次的报名总人数 = 新增报名人数onLoad: function (options) { var that = this; var activityId = options.activityId; //报名表人数统计 wx.request({ url: domain + /activityjoin/selectJoinCount, data: { activityId: activityId }, method: GET, success: function (res) { var...

微信小程序本地缓存数据增删改查实例详解

微信小程序本地缓存数据增删改查实例详解数据如： var user = { name: Lion, sex: guy } CRUD： // 添加 wx.setStorageSync(user, user);// 查询 var developer = (wx.getStorageSync(user) || []);// 更改 developer.name = Lion01; wx.setStorageSync(user, user);// 删除 wx.removeStorage({key: user })感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序实现写入读取缓存详解

在小程序中有些需要把数据缓存到Storage中，需要的时候在读取缓存中的数据，在微信小程序中通过setStorage写入数据： wx.setStorage({key: myData,data: res.data.data })通过getStorage读取缓存中的数据： var that = this;wx.getStorage({key: myData,success: function (res) {var myData = res.data;//读取key值为myData的缓存数据that.setData({//拿到缓存中的数据并渲染到页面userName: myData.user.truename,schoolName: my...

微信小程序数据缓存实现方法详解

微信小程序可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 wx.setStorage()---------异步设置缓存微信官方给出的属性 OBJECT参数说明：参数类型必填说明keyString是本地缓存中的指定的 keydataObject/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败...

微信小程序学习笔记之本地数据缓存功能详解【图】

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考，具体如下：前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。【将数据存储在本地缓存】wx.setStorage 【读取本地缓存】wx.getStorage 以手机号+密码登录为例，把登录成功返回的token值存储在本地缓存中，然后读取缓存中的token： login.php： <?php header("Content-type:text/html;charset=utf-8");$arr = arr...

在微信小程序中如何使用switch开关选择器【图】

这篇文章主要为大家详细介绍了微信小程序switch开关选择器的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文为大家分享了微信小程序switch开关选择器使用方法，供大家参考，具体内容如下效果图WXML<view class="tui-list-box"><view class="tui-menu-list"><text>状态：{{isChecked1}}</text><switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/></view><view class="tui-menu-list"><text...

微信小程序数据交互与渲染实例详解【图】

微信小程序数据交互与渲染实现效果图：微信小程序的api中提供了网络交互的api，我们只要调用即可和后端进行数据交互，该api为wx.request.，具体代码如下。//list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: }, loadList: function () { var that = this; that.setData({ hiddenLoading: !that.data.hiddenLoading }) var url = app.urls.CloudData.getList; that.setData({ u...

微信小程序实现传递多个参数与事件处理

前言开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？一、事件什么是事件事件是视图层到逻辑层的通讯方式事件可以将用户的行为反馈到逻辑层进行处理事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数事件对象可以携带额外信息，如id, dataset, touches事件处理的使用通过在wxml中设置bindtap、catchtap...

首页 / JAVASCRIPT / 微信小程序实现下拉菜单切换效果

微信小程序实现下拉菜单切换效果

内容导读

内容图文

内容总结

内容备注

内容手机端

【微信小程序实现下拉菜单切换效果】教程文章相关的互联网学习教程文章

程序 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程