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

2024-12-07 16:52:02

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

效果图：

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
 })
 }
})

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

微信小程序实现顶部下拉菜单栏

本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.get
微信小程序实现的点击按钮弹出底部上拉菜单功能示例

本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch
微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange=&qu
微信小程序实现弹出菜单功能

需求点击标签栏按钮,向下弹出菜单,再次点击,收回菜单要解决的问题标签栏三栏样式,标签栏固定不动: 点击标签栏弹出菜单,并且出现透明遮罩: 遮罩优先级在弹出框之下: 弹出框内标签的设置: 滚动栏滚动条的隐藏如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度弹出框设置z-index: 弹性布局flex 横向排列超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0;
微信小程序 action-sheet详解及实例代码

微信小程序开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名类型默认值说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
微信小程序 action-sheet底部菜单详解

微信小程序 action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange
微信小程序（二十二）action-sheet组件详细介绍

action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件主要属性: wxml  <button type="primary" bindtap="listen
微信小程序实现下拉菜单切换效果

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下效果图: wxml:  <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序select下拉框实现效果

小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉这里为了更清楚的显示层级就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view>  <view class='list-msg2' bindtap='bi
微信小程序实现下拉刷新和轮播图效果

本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"
微信小程序 select 下拉框组件功能

一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name
微信小程序select下拉框实现源码

这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00<
微信小程序iOS下拉白屏晃动问题解决方案

这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下问题感觉ios的小程序每个页面都可以下拉出现白屏有时页面带有滑动的属性会跟着晃动,体验不是很好解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢
微信小程序实现下拉刷新和上拉分页效果的方法详解

目录下拉刷新上拉分页下拉刷新下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2
微信小程序实现下拉选项框

本文实例为大家分享了微信小程序实现下拉选项框的具体代码,供大家参考,具体内容如下效果图 test.js /** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示 selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据 indexs: 0, //选择的下拉列表下标, }, // 点击下拉显示框 selectTaps()
微信小程序实现下拉刷新动画

微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下简易的效果下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random()
微信小程序实现下拉框功能

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

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

相关推荐

随机推荐