小程序纵向选项卡可以滑动_微信小程序常用纵向滑动菜单(点击侧边菜单定位)...

js代码

Page({

data : {

// 左侧的id

leftId: 'left0',

// 左侧当前项

leftActiveNum: 0,

// 右侧id

rightId: 'right0',

// 每块商品区块高度

heaghtArr : [],

},

// 左侧点击事件

leftClickFn(e) {

this.setData({

leftActiveNum: e.target.dataset.myid,

leftId: 'left' + e.target.dataset.myid,

rightId: 'right' + e.target.dataset.myid,

})

},

// 右侧滚动事件

rightScrollFn( e ){

let st = e.detail.scrollTop; // 获取当前滚动到的位置

let myArr = this.data.heightArr;// 获取所有商品区块高度

for( var i = 0; i < myArr.length; i++){

// 判断当前滚动位置是否超出区块累加高度并且小于下一区块高度来修改scroll-into-view的Id

if( st >= myArr[i] && st < myArr[i+1] ){

this.setData ({

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap提供了一种实现侧边选项卡的方法,可以在左侧或右侧显示竖直的选项卡。您可以使用Bootstrap的CSS类和组件来实现这个效果。通过添加适当的类和结构,您可以创建一个侧边选项卡布局。 要实现左侧或右侧的竖直选项卡,您可以使用Bootstrap的Tabs组件,并添加适当的CSS类。您可以使用"flex-column"类将选项卡设置为竖直排列,并使用"nav"类将选项卡标记为导航。 下面是一个示例代码,演示如何使用Bootstrap实现侧边选项卡布局: ```html <div class="container"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <h4>Home tab content</h4> <p>This is the content of the home tab.</p> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <h4>Profile tab content</h4> <p>This is the content of the profile tab.</p> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <h4>Messages tab content</h4> <p>This is the content of the messages tab.</p> </div> </div> </div> </div> </div> ``` 在这个示例中,我们使用了"flex-column"类将选项卡设置为竖直排列。每个选项卡都包含一个链接元素,使用"data-bs-toggle"和"href"属性来切换选项卡内容。选项卡内容是用"tab-content"类包裹的,并使用相应的ID和角色来关联选项卡和内容。 希望这个示例对您有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [BootStrap实现左侧或右侧竖式tab选项卡](https://blog.csdn.net/w1366352655/article/details/86156263)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Bootstrap5 组件](https://blog.csdn.net/qq_44174346/article/details/126056554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值