微信小程序轮播中的current_微信小程序顶部状态栏切换

最新推荐文章于 2023-12-13 18:24:49 发布

戚本刚

最新推荐文章于 2023-12-13 18:24:49 发布

阅读量679

点赞数

文章标签：微信小程序轮播中的current

本文链接：https://blog.csdn.net/weixin_30695909/article/details/112266682

版权

这篇博客介绍了如何在微信小程序中实现轮播图与顶部状态栏的联动效果，包括视频展示、动图演示及详细的Demo代码，分别展示了index.wxml、index.wxss、index.json和index.js的实现细节。特别指出在app.js中设置全局变量的重要性，同时提到了两种切换方式：滑动状态栏和点击状态栏箭头，但不允许直接切换。

摘要由CSDN通过智能技术生成

视频展示

动图演示

Demo代码

index.wxml

<view>
 
 <view class='Tab'>
  <view class='tabImgL' bindtap='lefttab'>
   <image mode="widthFix" src='{
     {zuosrc}}'>image>
  view>
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{
     {scrollLeft}}">
   <view class="tab-item {
     {currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">模块一view>
   <view class="tab-item {
     {currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">模块二view>
   <view class="tab-item {
     {currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">模块三view>
   <view class="tab-item {
     {currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">模块四view>
   <view class="tab-item {
     {currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">模块五view>
   <view class="tab-item {
     {currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">模块六view>
  scroll-view>
  <view class='tabImgR' bindtap='righttab'>
   <image mode="widthFix" src='{
     {yousrc}}'>image>
  view>
 view>
 
 <view class="tab-content" current="{
     {currentTab}}" duration="100" bindchange="switchTab" style="height:{
     {winHeight}}rpx">
  
  <view wx: