欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序开发页面右下角悬浮按钮功能设计与制作

    2018-05-15 09:27 来源/作者:懒人模板 分类:小程序教程  « »
    今天我们制作设计页面特效,在微信小程序页面添加悬浮按钮。一般适合于在线咨询客服 、一键拨号、在线提问等等。


    一、wxml页面代码如下:
        <!--圆形点击框  -->
        <view class="round-click">
           <navigator url='/pages/addimages/addimages' >发布咨询</navigator >
        </view>

    二、wxss样式页面代码如下:
    .round-click{
        height: 120rpx;
        width: 120rpx;
        background-color: #d92a2a;
        border-radius: 100%;
        position: fixed;
        bottom: 150rpx;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
    }
    .round-click navigator{
        font-size: 32rpx;
        max-width: 80rpx;
        color: #fff;
        text-align: center;
    }
    温馨提示:这样上面样式控制悬浮按钮样式,下面样式控制按钮电机以后属性。希望对你们微信小程序开发页面右下角悬浮按钮功能设计与制作有帮助!

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议