场景 当从一个分类列表页面进入到一个详情页面的时候，由于这个详情页面是公用的，为了区分页面，就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题！...接口调用失败的回调函数 complete: () => {} //接口调用结束的回调函数（调用成功、失败都会执行） }) ---- 开发DEMO list.wxml 在navigator标签的url设置两个参数...； 一个分类ID—用于详情页面请求对应分类的详细数据； 一个分类名称—用于本次博客的主要作用，设置导航栏标题。...，否则进行拼接； 用setNavigationBarTitle API实现导航标题的动态设置。...---- Page({ onLoad(opts){ // 设置导航栏为对应导航 wx.setNavigationBarTitle({ title
-- 导航组件 navigator 0 块级元素 默认会换行 可以直接加高度和宽度 1 url 要跳转的页面路径 绝对路径 相对路径 2 target 要跳转到当前的小程序 还是其他的小程序页面...self 默认值 自己 小程序的页面 miniProgram 其他的小程序的页面 3 open-type 跳转的方式 1 navigate 默认值 保留当前页面 跳转到应用内的某个页面
问题描述 App.json作为全局配置文件，可以设置5个功能：配置页面路径，配置窗口表现，配置标签导航，配置网络超时和配置debug模式。...其中，标签导航是众多移动App软件均会采用的一种导航方式，那么如何用微信小程序实现这一效果呢？ 解决方案 这就需要在app.json中配置tabBar属性。...taBar是一个对象，可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色，上边框颜色可以配置white、black两种颜色。...标签导航存放到list数组中，有一个标签导航就在list中配置标签导航，list中的每个对象对应一个标签导航，每个对象中可以配置标签导航的路径、导航名称、默认图标以及选中图标。 ? ?...结语 遇到整个的问题可以分步解决，先解决基础的小知识，再研究整体，会使过程比较容易。 END 实习编辑 | 王楠岚 责 编 | 赵 微 where2go 团队
问题描述 如何实现一个商品加购物车的导航？ 我们日常当中越来越多的小程序需要用到选择购买商品，并将商品加入购物车的导航过程，那么如何实现这个过程呢？...bind:click="onClickButton" /> （3）js代码 Page({ onClickIcon() { Toast('点击图标...'); }, onClickButton() { Toast('点击按钮'); }}); 购物车在日常使用中非常普遍，小程序掌握其开发方法十分有用。
首先，您可以在阿里图标库选择合适的图标，使用方法参见我之前写的文章：阿里巴巴矢量图标库 iconfont 的使用方法 我选了几个图标，选中不选中颜色有个区分： ?...底部菜单最少设置2个最多可以设置5个。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...
一、前言 做复杂的小程序就与web页面的区别原来越小了，一些web页面的功能会被要求添加到微信小程序页面中。 二、功能 页面在滑动的时候顶部页面导航跟随滑动，当点击导航中的任意一项时返回页面顶部。...<view class='{ {policyFilter.curSelectNavigationItemFormate(pageVariable.curSelected 发布者：全栈<em>程序</em>员栈长
SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。...那么，真的就没有办法在微信小程序中愉快的使用SVG图标了吗？...我们先来分析一下，对于使用SVG图标我们有哪些需求： 能够引入使用 能够调整颜色 首先第一点是没有问题的，微信小程序支持以Image.src的形式引入SVG。...DOM结构和CSS：首先svg_icon是整个图标的容器，负责设置图标的大小（1em=父容器字体的大小），和隐藏多余的部分（即图标的原始部分），而svg_icon-inner则负责渲染SVG，并投下有颜色的阴影...，通过给svg_icon-inner设置一个与父容器相同的宽高并给其设置一个投影反方向的偏移则可以实现改变SVG颜色的需求（将投影的颜色设置为currentColor可以使得图标的颜色随着父容器的字体颜色改变
Page({ data: { array: [] },问题描述 在很多APP软件，都会设置宫格导航，那么是如何设计的呢？...首先要熟悉小程序的开发流程：在js里提供数据，在wxml里绑定数据，在wxss里添加样式。...图3.1宫格导航效果图 结语 很多APP都会使用宫格导航来进行界面布局，效果图中仅仅体现了宫格导航的形式，其实在宫格导航上方还可以加入图片轮播，会达到更棒的效果。...实习主编 | 王楠岚 责 编 | 赵 微
一、介绍 1.小程序的底部导航需要在app.json文件里面设置 2.底部导航需要用到tabBar组件 二、具体代码 "tabBar": { "color": "#a9b7b7", "...三、解释 1.color：字体颜色 2.selectedColor：选中底部导航时的字体颜色 3.selectedIconPath：选中时的icon路径 4.iconPath：未来选中是的icon路径...5.pagePath：页面路径 6.text：文案 备注：特别要说明的是，tabBar下list数组里面的第一条内容，一定要对应pages数组中的第一条内容，否则导航无法显示。
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。 问题描述 底部标签导航可以说是任何一个APP的标配，那么该如何设置底部标签导航呢？...解决方案 制作标签导航首先需要我们自己将找到的图片保存进目录文件夹里，小程序界面会自动更新，然后再在App.json配置文件。...图3.1底部导航标签 代码解释： tabBar是一个对象，可以配置标签导航文字的默认和选中颜色，导航背景色、上边框色，上边框色有black和white两种。 list是一个数组，可以存放标签导航。...结语 App.json文件可以配置页面路径、窗口表现、标签导航、网络超时和debug模式，而制作标签导航需要在App.json里配置tabBar属性来设置导航文字和背景等颜色，以及添加list数组来配置标签导航的路径...、名称以及图标。
上一章节，我们分享了如何创建一个新的页面和设置页面的标题，这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航，会实现不同对应页面之间的切换。...我们先来看个我们要实现的底部导航栏的效果图：（三个导航图标示例，微信小程序最多能加5个） 1....回到项目里，新建一个images文件夹，将刚刚下载好的图标放在文件夹底下备用，将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了。 2....添加配置文件 我们找到项目根目录中的配置文件 app.json 加入如下配置信息（app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。）...参考文档： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar OK，结束，保存 编译 就可以实现小程序的经典的底部导航效果了
设置整个页面的背景颜色 */ page{ background:#f5f5f5; /* 避免左侧Item不够时 被白色覆盖*/ } /* 2.主盒子 */ .container { width: 100%...*/ height: 240rpx; /* 每个item设置高度是120px */ text-align: center; /* 设置图片下方的提示文字居中显示 */ } .nav_right .nav_right_items...image{ width: 240rpx; /* 给图片设置宽度 */ height: 200rpx; /* 给图片设置高度 */ border-radius: 20rpx; /* 给图片添加圆角边框...--右侧内容结束--> 3.1左侧分类导航内容，我们使用view试图，将分类导航列表【cateList】渲染出来。...cateList的接口可以自己设置接口进行调试，我这边的结构如下图： ? 3.2右侧内容同样用视图进行渲染，把图片和标题进行样式控制显示。 左侧导航设置点击事件，对右侧进行内容变化。
例如第一个加载图标的静态绘制 1、首先确定动画的盒子宽高； 2、设置盒子中每一个长方形的宽高以及定位（注意：此处需要将长方形的旋转中心点移动到长方形的右侧边终点，方便后期以该点旋转。）...； 3、通过长方形盒子的伪元素，设置显示的长方形背景和宽高，同时进行定位。...0.9; } } 进行动画绑定 .circle-line text{ animation: circle 1.5s linear infinite; } 动画绑定完成，发现所有的整个图标一起显示消失
在app.json内添加 "networkTimeout": { "request": 1000000, "connectSocket": 100000, "u...
问题描述 表单在小程序中非常常见，几乎每一个小程序都会有表单的界面。一些登录界面，身份验证界面，都是由表单来填写信息的。...那么应该如何来设置一个完整的表单界面呢？ 解决方案 不同的输入框类型构成了一个完整的表单，需要对不同的输入框进行设置。在json中对相关组件的引入，wxml中进行API的参数配置。...Value为当前输入的值，required设置表单必填星号，clearable设置是否启用清除控件，label输入框左侧的文本，placeholder输入框为空时的占位符，error将输入内容标红，border...图 1 效果图 结语 设置表单的时候一定要根据不同的要求对API的参数进行配置。...一个简单的输入框仅仅需要一个field标签就够了，但常见的输入框都是五花八门的，这些样式都是由表单的配置参数来设置的，这样就需要掌握熟悉这些参数的性质。 END
效果 代码 slidebar.wxml <view id="s-bar" class="slidebar" bindtouchstart="_onTouchS...
其实这也属于导航的一种方式。 ? 图1 App中TabBar的效果 其实小程序可以用非常简单的方式来实现这个效果，这一切不需要编写一行JavaScript代码。...现在准备3个页面，如果是新建的小程序工程，默认会建立两个页面：index和logs，我们可以再建立一个page页面（新加的页面不要忘了在app.json文件中配置）。.../images/wechatHL.png", "text": "页面3" } ] } } 运行程序后，会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。...图3 带TabBar的小程序 实际上，通过将tabBar的position属性值设为top，会将按钮放到页面上方，不过图像就不会显示了，效果如图4所示。 ? 图4 在页面顶端显示TabBar的效果
代码已上传至github github代码地址：https://github.com/Miofly/mio.git
今天做了一个傻的事情，在小程序加入了font-family: PingFangSC-Regular, PingFang SC;这行代码在电脑里面会正常显示，但是在手机里面不会变化的。...下面将讲讲小程序里面应该怎么设置字体 1.小程序设置字体有没有效果呢？...2.要怎样设置才能有自己想要的字体？ 设置字体有两种方法，但是最好的方案 是 js动态加载字体，然后页面引用。...小程序api上 动态加载网络字体，文件地址需为下载类型。IOS下仅支持https格式文件地址。 阿里的//因为如果地址是//开头，浏览器加载就会以当前的http前缀为基准。...0.2px; -moz-osx-font-smoothing: grayscale; } 还有一种方法就是，下载好转base64 贴在公共样式里引用，转64的方法首先不说麻烦，其次也占内存，小程序一共只能那么几
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
