下一个基础库版本中,取消支持position: sticky?
发布于 5 年前 作者 qzhao 6702 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  • 预期表现
  • 提供一个最简复现 Demo
<!--moui.wxml-->
 
<template name='Navbar'>
  <view class='moui-navbar'
    style='--activeIndex:{{activeIndex}};position:sticky;top:0;padding-top:{{statusBarHeight||"20"}}px;border:0'>
    <block wx:for='{{tabs}}' wx:key='*this'>
      <view id='{{index}}' style='width:144rpx;{{textStyle||""}}' bindtap='{{bindtap}}'
        class='moui-navbar__item {{activeIndex==index?"active":""}}'>
        {{item}}
      </view>
    </block>
    <view wx:if="{{reload}}" bindtap='confirmReload' hover-class='card-hover'
      style='width:22px;height:22px;padding:10px;border-radius:50%'>
      <view class='icon-reload' style='width:22px;height:22px' />
    </view>
    <view class='moui-navbar__slider'
      style='width:32px;height:2px;left:calc((var(--activeIndex) + 0.5) * 144rpx - 16px)'/>
  </view>
</template>
 
 
<!--page-->
 
<import src='./path/to/moui.wxml' />
<template is='Navbar' data='{{...Navbar}}' />
// page.js
 
Page({
 
  data: {
    Navbar: {
      activeIndex: 0,
      ...appData.systemInfo,
      tabs: ['问卷', '收藏'],
      bindtap: 'bindChangeIndex',
      textStyle: 'transition:none;-webkit-transition:none',
    },
  },
  bindChangeIndex: function ({ currentTarget: { id }, detail: { current, source } } = {}) {
    if (id.toString() || source === 'touch') {
      let activeIndex = id.toString() || current;
      if (parseInt(activeIndex) !== this.data.Navbar.activeIndex) {
        this.setData({ ['Navbar.activeIndex']: parseInt(activeIndex) });
      }
    }
  },
});
/** app.wxss **/
[@import](/user/import) 'style/moui.wxss';
/** https://github.com/mofong/moUI **/
2 回复

我也遇到了同样的问题,上个礼拜三还可以,昨天看就失效了,每次更新这个问题都会出来,无语。。。

你好,参考下面的回答。另外建议后续经过搜索后再提问,以提高问题解答的效率。

position:sticky
https://developers.weixin.qq.com/community/develop/doc/0002ee468c8f50a37ef6ba8515b800
回到顶部