微信小程序实现侧边导航栏
作者:MangGit 发布时间:2024-04-16 09:53:36
标签:微信小程序,导航栏
本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下
效果图
wxml
<view class='productNav'>
<!-- 左侧 -->
<view class='left'>
<view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>为您推荐</view>
<view class="{{active==1?'selected':'normal'}}" id="1" bindtap='switchNav'>电脑</view>
<view class="{{active==2?'selected':'normal'}}" id="2" bindtap='switchNav'>手机</view>
</view>
<!-- 右侧 -->
<view class='right'>
<view class='type'>
<!-- current:当前所在滑块的 index -->
<!-- vertical:滑动方向是否为纵向 -->
<swiper current='{{currentTab}}' vertical='{{true}}'>
<!-- catchtouchmove 阻止弹窗后滚动穿透 -->
<swiper-item id="0" catchtouchmove="false">
为您推荐
</swiper-item>
<swiper-item id="1" catchtouchmove="false">
手机
</swiper-item>
<swiper-item id="2" catchtouchmove="false">
电脑
</swiper-item>
</swiper>
</view>
</view>
</view>
js
Page({
data: {
active:0,
currentTab:0
},
switchNav: function (e) {
var page = this;
var id = e.target.id;
if (this.data.currentTab == id) {
return false;
} else {
page.setData({
currentTab: id
});
}
page.setData({
active: id
});
}
})
wxss
.productNav{
display: flex;
flex-direction: row;
font-family: "Microsoft YaHei"
}
.left{
width: 25%;
font-size: 30rpx;
background-color: #f4f4f4;
}
.left view{
text-align: center;
height: 90rpx;
line-height: 90rpx;
}
.selected{
background-color: #fff;
border-left: 2px solid #E54847;
font-weight: bold;
color: #E54847;
}
.normal{
background-color: #f4f4f4;
border-bottom: 1px solid #f2f2f2;
}
.right{
width:75%;
margin: 0;
}
swiper{
height: 500px;
}
来源:https://blog.csdn.net/weixin_41599291/article/details/93650074
0
投稿
猜你喜欢
- 知识点: Array方法: sort:降序 reverse:反序 效果: 代码: <style> *{ margin
- 有人问为什么要去扫描网站目录:懂的人自然懂这个Python脚本的特点:1.基本完善2.界面美观(只是画了个图案)3.可选参数增加了线程数4.
- 网上下载mayavi的官方帮助文档,里面有很多例子,下面的记录都是查看手册后得到的。http://code.enthought.com/pr
- 读文件:要以读文件的模式打开一个文件对象,使用Python内置的open()函数,传入文件名和标示符:>>> f = op
- vue配置文件vue.config.js配置前端代理将此代码片段命名为 vue.config.js,放在项目根目录即可仅需修改target属
- Div的浮动+循环(描述的不清楚,请看图)在设计和布局的时候,碰到图片循环问题,碰到间距问题,怎么样让循环的图片每行的起始点跟上边的titl
- 使用opencv-python,把一段视频中指定帧频间隔的图像保存到新建的文件中首先安装好python ,配置好opencv-python#
- 由于HTTP协议是无状态协议,所以服务器与客户端通过http协议通讯时,服务器不能记录客户端的信息。为了解决这个问题,通过 Cookie 和
- 如下所示:from urllib.parse import quoteimport stringurl = r'http://www
- 延迟是什么defer即延迟语句,极个别的情况下,Go才使⽤defer、panic、recover这种异常处理形式。defer可以延迟函数、延
- 字符串与数字类型的转换什么是类型转换?—> 将自身的数据类型变成新的数据类型,并拥有新的数据类型的所有功能的过程即
- 使用if…elif…elif…else 实现switch/case可以使用if…elif…elif..else序列来代替switch/cas
- 导语还记得那些年,我们玩过的Windows小游戏吗?说起Windows自带的游戏,相信许多80、90后的朋友都不陌生。在很早的那个游戏贫瘠的
- 一、安装pycryto能实现大致3种类型的数据加密(单向加密、对称加密 和非对称加密),产生随机数,生成密钥对,数字签名单向加密:Crypt
- Accessibility—-可访问性/无障碍访问Accessibility在此处指网页的可访问性。W3C的网页可访问性定义如下:“网页可访
- 问题描述如下:解决方案如下:下图中字体调整为18及以上效果如下:来源:https://blog.csdn.net/appleyuchi/ar
- 单例模式是一种常见的设计模式,该模式的主要目的是确保某一个类只有一个实例存在。当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派
- 因为很多时候要涉及到url的编码和解码工作,所以自己制作了一个类,废话不多说 码上见!# coding:utf-8import urllib
- 概念如果索引包含所有满足查询需要的数据的索引成为覆盖索引(Covering Index),也就是平时所说的不需要回表操作判断标准使用expl
- 一、复制的原理MySQL 复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新、删除等等)。每个从服务器从主服务器接收主服务器已经记录