文档文件目录一、底端导航栏栏栏二、自定共享资源功效三、滚屏图四、四种网页页面网页页面全自动自动跳转方法一、底端导航栏栏栏
整体总体目标 : 底端导航栏栏栏,点一下全自动自动跳转网页页面网页页面,标示样式变化
(一)相片素材图片照片提早提前准备
app.json:
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/test/helloworld" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "images/group1.png", "iconPath": "images/group0.png", "pagePath": "pages/test/helloworld", "text": "通信录" }, { "selectedIconPath": "images/home1.png", "iconPath": "images/home0.png", "pagePath": "pages/index/index", "text": "首页" }, { "selectedIconPath": "images/more1.png", "iconPath": "images/more0.png", "pagePath": "pages/logs/logs", "text": "很多" } ] }}
导航栏栏栏的基本配置如上,手机微信微信小程序官方网网给了详细配置,见联接:developers.weixin.qq/miniprogram/dev/framework/config.html#全局性性配置
二、自定共享资源功效整体总体目标: 共享资源朋友或手机微信群
在index/index.js里面再加了一段自定共享资源的编号下列,path: '/page/index?id=123',进行了index首页网页页面网页页面的共享资源功效
案例编号:Page({//右上角 onShareAppMessage: function () { return { title: '自定共享资源题型', //共享资源题型 desc: '自定共享资源描述', //共享资源描述 path: '/page/index?id=123' //通常为设置url,这儿是设置在首页马上共享资源 } } })
点一下右上角、共享、这儿就进行共享具体实际效果啦!
整体总体目标: 最常常见的一个滚屏图,中间带小圆点,自动式滚屏。
Swiper是拖拽动漫动画特效手机软件,房屋朝向手机上上、平板电脑电脑上电脑上上等移动智能化终端设备。
[标识:內容1]
能进行触碰屏聚焦点点图、触碰屏Tab变换、触碰屏图组变换等普遍具体实际效果。是目前应用范畴普遍的手机上端网页页面网页页面碰触内容拖拽手机软件。
swiper官方网网站swiper详尽表明链:developers.weixin.qq/miniprogram/dev/component/swiper.html
第一步:helloworld.wxml文本文档:
swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" block wx:for="{{imgUrls}}" wx:key="unique" swiper-item image src="{{item}}" / /swiper-item /block /swiper
第二步:helloworld.js文本文档:
Page({ data: { imgUrls: [ 'img02.tooopen/images/20150928/tooopen_sy_143912755726.jpg', 'img06.tooopen/images/20160818/tooopen_sy_175866434296.jpg', 'img06.tooopen/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, //Boolean不是是显示信息信息内容操纵控制面板标识点 autoplay: true, //Boolean不是是自动式变换 interval: 3000, //Number自动式变换时间间隔 duration: 500, //Number拖拽日本动漫時间 },})
手机上上检验:
1、全自动自动跳转可以返回
!--网页页面网页页面全自动自动跳转-- view navigator url="/pages/logs/logs" hover- 网页页面网页页面全自动自动跳转,可以返回 /navigator /view
2、全自动自动跳转不能以返回
view navigator url="/pages/logs/logs" hover- redirect 网页页面网页页面全自动自动跳转,无法返回 /navigator /view
3、点一下底端导航栏栏栏全自动自动跳转(导航栏栏栏与上面的view全自动自动跳转相分歧,优先选择挑选导航栏栏栏全自动自动跳转)
和前文底端导航栏栏栏设置一样
4、变换到tab页
view navigator url="/pages/logs/logs" open-type="switchTab" hover- 变换 Tab /navigator /view
点一下tab全自动自动跳转
官方网网全自动自动跳转帮助文字文本文档:developers.weixin.qq/miniprogram/dev/component/navigator.html
上一篇blog:手机上手机微信手机微信微信小程序开发设计设计方案(二)创建helloworld手机微信微信小程序
下一篇blog:手机上手机微信手机微信微信小程序开发设计设计方案(四)
经典著作权声明
即速应用倡导高度重视与维护保养技术专业专业知识产权年限期限。如发现本站文章内容內容存在经典著作权难点,烦请提供经典著作权疑虑、真正真实身份确认、经典著作所有权证实、 ,大伙儿将马上处理。本站文章内容內容仅作共享资源沟通交流沟通交流关键主要用途,写作者看法不一同于即速应用看法。顾客与写作者的一切交易与本站无关紧要,请悉知。