微信开发工具固定在底部_使用微信开发者工具怎样设置底部按钮 - CSDN
  • 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。 那他们是怎么出现怎么着色的呢?两...

    好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。

    我们先来看个效果图


    这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。

    那他们是怎么出现怎么着色的呢?两步就搞定!


    1. 图标准备

    阿里图标库  http://www.iconfont.cn/collections/show/29

    我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮


    在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 


    将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了



    2. 更改配置文件

    我们找到项目根目录中的配置文件 app.json 加入如下配置信息

     "tabBar": {
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle":"white",
        "list": [{
          "selectedIconPath": "images/111.png",
          "iconPath": "images/11.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "selectedIconPath": "images/221.png",
          "iconPath": "images/22.png",
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }, {
          "selectedIconPath": "images/331.png",
          "iconPath": "images/33.png",
          "pagePath": "pages/test/test",
          "text": "开心测试"
        }]
      },

    解释一下 对应的属性信息

    tabBar  指底部的 导航配置属性

    color  未选择时 底部导航文字的颜色

    selectedColor  选择时 底部导航文字的颜色

    borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条

    list   导航配置数组

    selectedIconPath 选中时 图标路径

    iconPath 未选择时 图标路径

    pagePath 页面访问地址

    text  导航图标下方文字


    如果要改变更详细的样式 请参看

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar


    好了,保存 编译  就可以看到上面的效果了。






    展开全文
  • 在开发微信公众号功能时,页面底部一般会声明一些公司的版权之类的。但是如果用户需要页面输入内容时,底部会漂浮输入法的上面,甚至有的时候不是紧贴着输入法,而是有一小段间距。既影响用户输入又影响页面美观...

    在开发微信公众号功能时,页面底部一般会声明一些公司的版权之类的。但是如果用户需要在页面输入内容时,底部会漂浮在输入法的上面,甚至有的时候不是紧贴着输入法,而是有一小段间距。既影响用户输入又影响页面美观。截图是出现问题的页面:
    这里写图片描述
    解决问题的方案是,将如下的js放入出现此问题的页面中。js源码如下:

        //解决输入被遮挡问题
            window.onresize = function() {
                var top = $("#footer").offset().top;
                var user_message_box = $('#footer');
                top > 400 ? user_message_box.hide() : user_message_box.show();
            };

    其中#footer是底部div的id值,进过多次测试发现无论屏幕大小,系统不同(android或ios)用此js都可以解决底部遮挡输入框的问题。而且经过多次测试发现在手机上400高度是个合适的数值。下图是解决之后的效果图(当输入发弹起时,底部声明不见了,当输入法消失时底部又自动出现):
    这里写图片描述

    1、有人会说底部的div是不是没有固定死,其实不是的。底部就是用css固定了,但是在手机上,如果调用了输入法,底部就会出现。初步怀疑屏幕大小就是整个屏幕高度减去输入法框占用的高度。

    2、可能还有人说为什么不把底部声明信息去掉呢?去掉底部会显得页面光秃秃的,而且主要是领导不同意去掉底部!所以就得解决掉。

    $(“#footer”).offset().top;取值示意图:
    这里写图片描述

    展开全文
  • 在开发工具上运行,完美解决!但是,当使用真机(iOS)运行时,问题依旧存在 所有的问题都难不倒聪明的开发者????下面来讲讲解决办法: class为container的div下面写一个透明div,设置这个view的宽和高,如下 ...

    问题:页面底部tab栏遮挡住了页面部分内容

    解决方案:添加属性 margin-bottom

    .container {
    
       margin-bottom : 50px
    
    }

    在开发工具上运行,完美解决!但是,当使用真机(iOS)运行时,问题依旧存在

    所有的问题都难不倒聪明的开发者😁下面来讲讲解决办法:

    在class为container的div下面写一个透明div,设置这个view的宽和高,如下

    html:
    
    <divclass='container'>
        <div class='li' v-for="item in list" key="item.id">{{item}}</div>
    </div>
    <div class='placeholder-view'></div>
    
    css:
    
    .placeholder-view {
      width: 100%;
      height: 50px;
    }

    问题解决。

    展开全文
  • 我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题?...第一步:首先实现按钮固定在页面底部,需要设置按钮的position为fi...

    我们分为以下部分来解决这个问题:

    第一部分:问题的表现是怎么样的?

    第二部分:问题的是如何实现的?

    第三部分:如何解决问题?

     


     

    第一部分:问题的表现是怎么样的?

    我设置了页面有0-99共100个数,但是最后几个数字被底部固定的按钮遮挡住了,显示不全

     

    第二部分:问题的是如何实现的?

    第一步:首先实现按钮固定在页面底部,需要设置按钮的position为fixed

    (注意:文章底部回帖出全部代码,以下只是针对性的贴出此时正在说明的代码)

    index.wxml页面:

    <view class='btn-view'>
        <button class='btn'>底部按钮</button>
    </view>

    index.wxss页面:

    .btn-view {
      width: 100%;
      padding: 20rpx 0;
      background-color: yellow;
      position: fixed;
      bottom: 0;
      left: 0;
    }
    
    .btn {
      width: 90%;
    }

    实现效果如下图: 

     

     

    第二步:给页面填充数据

    index.js页面:

    var list = []
    for (var i = 0; i < 100; i++) {
        list.push(i)
    }
    
    this.setData({
        list:list
    })

    index.wxml页面:

    <view class='list'>
        <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
    </view>

     

    实现效果如下图: 

     

    结束之后,我们就会发现,结果会如第一部分展示的那样,按钮遮挡住了页面不部分内容?...

     

    第三部分:如何解决问题?

    出现这个问题,我先尝试给class=list的view添加了margin-bottom属性,如下

    .list {
      margin-bottom: 150rpx;
    }

    在开发工具上运行,完美解决!But...正如所有的美好都要经历不止一次的磨难后方才实现一样,当使用真机(iOS)运行时,问题依旧存在?...

    这个问题微信官网的论坛上也有人提,但是微信官方没有给出回答(我看到的那个问题没有回到)

    问题还在,怎么办呢?

    所有的问题都难不倒聪明的开发者?下面来讲讲解决办法:


     

    方法一:在class为list的view下面写一个透明view,设置这个view的宽和高,如下:

    此方法为投机取巧的做法,但是很好用(偷笑...),谁让微信小程序官方不给个正解呢!

    index.wxml:

    <view class='list'>
        <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
    </view>
    <view class='placeholder-view'></view>
    <view class='btn-view'>
        <button class='btn'>底部按钮</button>
    </view>

    index.wxss:

    .placeholder-view {
      width: 100%;
      height: 150rpx;
    }

    显示效果如下:所有内容都展示出来了

     

    方法二:解决小程序position: fixed;定位在底部,遮挡页面内容问题

    看到这篇文章有解决,但是这个解决方法是:当页面内容不足一屏时,按钮在底部显示,当内容多余一屏时,按钮会在内容下面随内容一起滚动

    虽说和我们之前的初衷让按钮始终固定在底部有冲突,但是不失为一种解决办法,只要领导那边能通过这种方法(不通过就用方法一,简单、粗暴、有用)


     

    完整代码:

    .wxml:

    <view class="container">
      <view class='list'>
        <view class='li' wx:for='{{list}}' wx:key=''>{{item}}</view>
      </view>
      <view class='placeholder-view'></view>
      <view class='btn-view'>
        <button class='btn'>底部按钮</button>
      </view>
    </view>

    .wxss:

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    } 
    
    .placeholder-view {
      width: 100%;
      height: 150rpx;
    }
    
    .btn-view {
      width: 100%;
      padding: 20rpx 0;
      background-color: yellow;
      position: fixed;
      bottom: 0;
      left: 0;
    }
    
    .btn {
      width: 90%;
    }

    .js:

    Page({
      data: {
        list:[]
      },
    
      onLoad: function () {
        var list = []
        for (var i = 0; i < 100; i++) {
          list.push(i)
        }
    
        this.setData({
          list:list
        })
      }
    })

    方法二的代码稍后整理出来再贴出来(待续...)

     

    转载于:https://www.cnblogs.com/china-fanny/p/11134316.html

    展开全文
  • 微信小程序是近些年一项新的事物。互联网的发展过程中,总会不断出现新的事物,因为逆水行舟不进则退,创新才是互联网科技发展的原动力。...今天主要介绍下开发工具、项目结构、全局配置文件及页面跳转等。
  • 最近几个月一直从事微信开发,从刚开始的懵懂渐渐成长了一点。今天觉得微信底部自定义菜单,如果能html的页面上也能显示就好了. 记得以前看过某个网页有类似效果.查找了该网页的css. ok现在html css 实现微信自定义...
  • PS:微信开发者工具iphonex与实际真机测试效果不同,底部并没有底部提升。 iphone11截图 app.js调用 wx.getSystemInfo接口获取页面信息,判断底部提升高度。 官网文档:获取系统信息 如图所示 底部提升的高度 = ...
  • 注:微信小程序开发工具不提供直接建文件夹的功能,images文件夹需手动创建当前项目下。 (2)配置app.json文件如下:(app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间...
  • 由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和...第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第...
  • (写前面:微信小程序的界面布局wxss的语法基本与css相同) 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的...
  • 按钮样式: ...position:fixed 和bottom:0 这两句让按钮至于页面底部。 由于按钮position:fixed使其脱离了文档流,按钮上方的内容会钻到按钮下面去,所以要给上面的元素加一句margin-bottom把
  • 我们经常会看到一些网页的底部下面会有一些固定的导航栏,点击之后就会跳转到相应的界面。例如这些: 那么这些功能都是怎样实现的呢?今天我就一下面的效果图作为例子介绍。 1.目录 “pages/post” 里面...
  • 使用微信小程序开发工具做一个和微信一样的评论视图:     首先我们捋一下这个视图的结构: 黑色的容器最大 包含三个横向 并列的三个红色的容器 第一个红色的容器包含两个橘色的纵向并列的容器。 这样,...
  • 微信开发的时候,如果页面顶部有轮播图,底部有导航栏,中间是栏目,那么让中间的栏目,如何根据设备的高度,来进行自适应的填充呢? 首先想到的是运用媒体查询,但是媒体查询效果差,效率低,所以就运用jQuery写法...
  • 关于底部菜单是什么,我想没必要介绍了,市场上的APP里太常见了,这里提供两种方式来实现。 记得之前写过几篇关于底部菜单实现的方法,有兴趣的朋友可以看看: 1、《安卓开发复习笔记——TabHost组件(一)(实现...
  • 必须按照比例返回固定比例图片大小的图片,这个不同机型上很难办到 2、seek(0)以后,再pause(),但是这样做会出现另外的bug: 第一次播放时,播放当前视频,其他视频会一起加载 除了第一次播放,虽然实现了伪停止...
  • Ios系统 1、body上绑定click事件失效。 解决:body标签下面,用个div,当做...用new Date(YYYY-MM-DD) 时,安卓手机上正常获取时间数据。ios上就不行。 解决:改成 YYYY/MM/DD 的格式。用 .replace(/-/g, '/'...
  • XML文件如下: android:orientation="vertical" android:layout_width="fi
  • 最新小程序商城类开发教程: 1微信小程序之侧栏分类 —— 微信小程序实战商城系列(1) 2微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2) 3微信小程序之购物数量加减 —— 微信小程序实战商城系列...
  • 目录 一、准备工作 二、开始写代码 ... 经过跌跌撞撞地探索,终于完成了微信支付功能,现将微信支付开发重要步骤及代码记录下来,以备不时之需。相信很多童鞋要开始开发微信支付功能的时候,都是一脸懵...
1 2 3 4 5 ... 20
收藏数 2,805
精华内容 1,122
关键字:

微信开发工具固定在底部