微信小程序之导航滑块视图容器功能的实现代码(简单两步)


Posted in Javascript onJune 19, 2020

先看效果图:

微信小程序之导航滑块视图容器功能的实现代码(简单两步)
微信小程序之导航滑块视图容器功能的实现代码(简单两步)

这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换。

实现步骤:

  • 编写滑块视图代码
  • 编写逻辑代码

wxml:

<view class="content">
  <view class="title">
    <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">关注</view>
    <view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">新鲜</view>
    <view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">推荐</view>
  </view>
  <swiper class="swiper" bindchange="swiperchange" current="{{currentTab}}" style="height:{{winHeight}}px">
    <swiper-item item-id="{{item.id}}">
      关注
    </swiper-item>
    <swiper-item item-id="{{item.id}}">
      新鲜
    </swiper-item>
    <swiper-item item-id="{{item.id}}">
      推荐
    </swiper-item>
  </swiper>
</view>

wxss:

.title{
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #ff99cc;
  height: 100rpx;
  position: fixed;
  z-index: 9999999999999;
}
.select{
  width: 33%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  color: white;
  border-bottom: 5rpx solid #ff99cc;
}
.default{
  margin:0 auto;
  padding:15px;
  color: #666;
}
.swiper{
  margin-top: 100rpx;
}

js:

data: {
  currentTab:1,
  winWidth:0,
  winHeight:0
 },

onLoad: function (options) {
  wx.getSystemInfo({
   complete: (res) => {
    this.setData({
     winWidth:res.windowWidth,
     winHeight:res.windowHeight
    })
   },
  })
 },
 switchNav(e){
  console.log(e)
  if(this.data.currentTab==e.target.dataset.current){
   return false
  }else{
   this.setData({
    currentTab:e.target.dataset.current
   })
  }
 },
 swiperchange(e){
  this.setData({
   currentTab:e.detail.current
  })
 },

总结

到此这篇关于微信小程序之导航滑块视图容器功能的实现代码(简单两步)的文章就介绍到这了,更多相关微信小程序滑块视图容器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
Prototype Function对象 学习
Jul 12 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
js倒计时简单实现方法
Dec 17 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
小程序中的箭头函数的具体使用
Jun 19 #Javascript
You might like
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
前端性能优化建议
2020/09/17 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python实现对变位词的判断方法
2020/04/05 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
建筑人员岗位职责
2013/12/25 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
车队司机自我鉴定
2014/03/02 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
求职简历自我评价范文
2015/03/10 职场文书
吴仁宝观后感
2015/06/09 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python