微信小程序动态更改标题栏_微信小程序动态状态栏切换

最新推荐文章于 2024-04-25 10:36:05 发布

幸福暗恋我

最新推荐文章于 2024-04-25 10:36:05 发布

阅读量210

点赞数

文章标签：微信小程序动态更改标题栏

本文链接：https://blog.csdn.net/weixin_34162253/article/details/112315449

版权

该博客展示了如何在微信小程序中实现实时动态更改标题栏和状态栏的效果，包括滑动状态栏和左右滑动内容区域的交互。通过提供`index.wxml`, `index.wxss`, `index.json`, `index.js`等关键代码段，以及组件`components/tabs`的相关文件，详细解释了实现这一功能的过程，并给出了实际运行的Demo。读者可以在小程序中查看完整效果。" 49487791,5002421,优化解法：LeetCode最大面积容器问题,"['算法', '动态规划', '数据结构', 'Leetcode', '编程挑战']

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

视频展示

动图展示

Demo代码

index.wxml

<mp-tabs tabs="{
     {tabs}}" activeTab="{
     {activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected">
 <block wx:for="{
     {tabs}}" wx:key="title">
  <view class="tab-content" slot="tab-content-{
     {index}}">
   <image src="{
     {images[index]}}">image>
  view>
 block>
mp-tabs>

index.wxss

page {
     
    background-color: #FFFFFF;
    height: 100%;
}

.weui-tabs-bar__wrp {
     
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

.weui-tabs-swiper {
     
    width: 100%;
    height: 100%;
}

.tab-content {
     
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    box-sizing: border-box;
    padding: 40rpx;
}

.weui-tabs-bar__title {
     
    margin: 0px 10px;
}

.tab-bar-title__selected {
     
    font-size: 20px;
    font-weight: bold;
}

index.json

{
     
  "usingComponents": {
     
    "mp-tabs": "../../components/tabs/index"
  }
}

index.js

Page({
     
  data: {
     
    tabs: [],
    activeTab: 0,
    images: ["https://wx1.sinaimg.cn/large/7139bff5ly1fjasmh731ig20dw0b04bx.gif",
      "https://wx1.sinaimg.cn/l

最低0.47元/天解锁文章

幸福暗恋我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序动态更改标题栏_微信小程序动态状态栏切换

视频展示动图展示Demo代码index.wxml<mp-tabstabs="{{tabs}}"activeTab="{{activeTab}}"swiperClass="weui-tabs-swiper"bindtabclick="onTabCLick"bindchange="onChange"activeClass="tab-bar-title__selected"&...
复制链接

扫一扫