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

2024-09-27 11:35:38

先看效果图：

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

实现步骤：

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

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

总结

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

微信小程序教程之wxapp视图容器 scroll-view

相关文章: 微信小程序教程之wxapp视图容器 swiper 微信小程序教程之wxapp视图容器 scroll-view 微信小程序教程之wxapp 视图容器 view scroll-view 可滚动视图区域. 属性名类型默认值说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower
微信小程序教程之wxapp视图容器 swiper

相关文章: 微信小程序教程之wxapp视图容器 swiper 微信小程序教程之wxapp视图容器 scroll-view 微信小程序教程之wxapp 视图容器 view 微信小程序视图容器:swiper 滑动面板滑动面板属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的index interval Number 5000
微信小程序开发之滑块视图容器(swiper)详解及实例代码

微信小程序开发之滑块视图容器详解实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="
微信小程序视图容器（swiper）组件创建轮播图

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l
微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图场景当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签通过bindscroll监听刻度尺触摸事件渲染取值到页面基本布局 <scroll-view scroll-x="true"
微信小程序之滚动视图容器的实现方法

微信小程序之滚动视图容器的实现方法直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con
微信小程序之导航滑块视图容器功能的实现代码(简单两步)

先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw
微信小程序教程之wxapp 视图容器 view

相关文章: 微信小程序教程之wxapp视图容器 swiper 微信小程序教程之wxapp视图容器 scroll-view 微信小程序教程之wxapp 视图容器 view View 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp"
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu
微信小程序车牌号码模拟键盘输入功能的实现代码

先来一波预览图. 预览图片一: 预览图二: 预览图三: 预览图四: 预览图五: 大概的效果就和原来图差不多. 思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码.) 大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段. 第一,原型的设计思路:先设计好模拟键盘的大概架构,样式.
微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码:  <view class="navView" bi
微信小程序 wxapp导航 navigator详解

微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名类型默认值说明 url String 应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没

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

相关推荐

随机推荐