项目目录: 模拟数据: utils / data.js function getSData() { var data = [ { "id": 1, "tree": { "id": 1, "desc": "宝宝奶粉", "desc2": null, "level": "level1", "logo": null, "po

一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"red"

组件内属性详解   属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.absolute nav-color String transparent 否 导航栏(包含导航栏以及状态栏)背景色 nav-bar-style String default 否 导航栏样式,可取值为default.capsule.capsule-diy.diy nav-bar-title Strin

就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击时的ind

16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="height:{{height}}px" bindchange="change" current-item-id="{{docid}}" duration="100" > <swiper-item data-key="{{it

一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop"> <view>回到顶部</view> </view> 二.在scroll-view形式下回到顶部 <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltouppe

效果图: 代码: <view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条位置 --> <!-- scroll-with-animation滚动添加动画过渡 --> <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}&

Wxml代码:<view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected">行业动态</view> <view class="{{selected1?'red':'default'}}" bindt

效果如图: 也就是实现红色框的部分. wxml代码 <view class="header {{scrollDown?'scrolled':''}}"> <view bindtap="tapsearch" class="search"> <image src="/icon/search.png" /> </view> <view class='tools'> <

https://blog.csdn.net/u012927188/article/details/73650264

上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-item { width:33.3%; color:#C7C7CB; font-size:28rpx; display:flex; align-items:center; justify-content:center; display:flex; border-bottom:1rpx solid #D

​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. ​ 参考了jiuyucha的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到

获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfoSync()[官方文档]获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的. let res = wx.getSystemInfoSync(); let statusHeight = res.statusBarHeight; // 注意

微信小程序教程系列 来源:       https://blog.csdn.net/michael_ouyang/article/details/56846185 相关连接:http://blog.csdn.net/michael_ouyang/article/details/54700871 基础篇 ------------------------------------------------------------ 微信开发者工具的快捷键 微信小程序的文件结构 —— 微信小程序教程系列(1

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类  —— 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车 也发现了自己的不足之处: 余额不足. 为大家介绍的就是购物车 这里演示从商品列表中添加到购物车 下面先做商品列表页.如下图: 布局分析: 首先一个list的主盒子,接着是item盒子,这是必须的.

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="

本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数

拥有小程序只是基础,能玩转小程序运营才是关键.本文将会简单讲述十种最实用的小程序推广策略,结合具体案例阐述商家企业如何在拥有小程序后玩转小程序,快速实现小程序的推广. 一. 公众号+小程序 小程序可以通过关联公众号实现介绍页展示.模板消息推送.自定义菜单栏入口设置.图文中插入小程序卡片.图文CPC广告.会话下发送的小程序卡片.小程序落地页广告等.通过小程序关联公众号,可以无缝连接形成直接高效的宣传方式,帮助小程序获取巨大流量,公众号主导线上,小程序发力线下,实现线上和线下流量融合,公众号生产内容

微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部 tab 等 pages字段 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录. window字段 用于设置小程序的状态栏.导航条.标题.窗口背景色.定义小程序所有页面的顶部背景颜色,文字颜色

场景值 基础库 1.1.0 开始支持,低版本需做兼容处理 当前支持的场景值有: 场景值ID 说明 1001 发现栏小程序主入口 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1007 单人聊天会话中的小程序消息卡片 1008 群聊会话中的小程序消息卡片 1011 扫描二维码 1012 长按图片识别二维码 1013 手机相册选取二维码 1014 小程序模版消息 1017 前往体验版的入口页 1019 微信钱包 1020 公众号 profile 页相关小程序列表