微信小程序：实现与胶囊对齐效果

作者: 我的小小笔尖 | 来源:发表于2022-09-20 18:57 被阅读0次

小程序轮播图
微信小程序实现发布作业
微信小程序联盟：官方文档+精品教程+demo集合（6月16日更新
微信小程序实现类3D轮播图
微信小程序实现标签页滑块效果
android app分享微信小程序(包含封面网络图片)+图片到
微信小程序wxs实现slider滑块跟随
微信小程序：支付系列专辑（开发指南+精品Demo）
【微信小程序canvas】实现小程序手写板用户签名(附代码)
uniapp实现微信小程序的登录流程（包括微信授权和手机号授权）

通过以下设置可以取消小程序某个页面的导航栏

app.json

  "window": {
    ......,
    "navigationStyle": "default"
  },

page.json

{
  ......,
  "navigationStyle": "custom"
}

之后需要实现一个效果：标题栏与右侧胶囊对齐

page.js

    const { height, top } = wx.getMenuButtonBoundingClientRect();
    // 定义功能菜单行与胶囊对其
    this.setData({
      margintop: top,
      funcrowheight: height
    })

page.wxml

<view class="funcrow" style="height:{{funcrowheight}}px;margin-top:{{margintop}}px;">
......

效果如下：

和胶囊对齐效果.png

小程序轮播图
| 微信小程序轮播图实现，实现在首页上轮播图，让效果更好看。查看微信小程序开发文档可知，微信小程序提供swiper...
微信小程序实现发布作业
微信小程序实现发布作业效果图: 小程序完整代码
微信小程序联盟：官方文档+精品教程+demo集合（6月16日更新
6月16日更新微信小程序--绘图canvas微信小程序--如何实现动画效果微信小程序---设计支付密码的输入框微...
微信小程序实现类3D轮播图
在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现效果图如下： ...
微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果小程序完整代码: wxml: wxss: js: json: 案例二: 效果图:
android app分享微信小程序(包含封面网络图片)+图片到
A 分享微信小程序效果：实现代码分享商品到小程序设置生成bitmap大小微信分享bitmap不能大于128...
微信小程序wxs实现slider滑块跟随
微信小程序音频播放时，有可能需要实现跟随滑块的进度显示效果，如上面演示图。这个效果如果微信小程序的JavaScr...
微信小程序：支付系列专辑（开发指南+精品Demo）
小程序支付指南：微信小程序与php 实现微信支付 | 链接微信小程序---设计支付密码的输入框| 链接 e玩转...
【微信小程序canvas】实现小程序手写板用户签名(附代码)
【微信小程序canvas】实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果...
uniapp实现微信小程序的登录流程（包括微信授权和手机号授权）
怎么使用uniapp实现微信小程序的微信授权和手机号授权呢？效果如下：首先配置微信小程序的AppID，如果不配置...