微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡
来源:互联网 发布:galgame游戏删除数据 编辑:程序博客网 时间:2024/06/05 09:09
初步学习微信小程序,开发过程中发现许多常用的代码块,特此记之,方便以后调用。
一、 tabar
"tabBar": { "list": [ { "iconPath": "images/index.png", "selectedIconPath": "images/index.png", "pagePath": "pages/index/index", "text": "搜索" }, { "pagePath": "pages/dreams/dreams", "text": "首页" }, { "pagePath": "pages/myDream/myDream", "text": "我" } ] }
二、 页面跳转
方法一:
<navigator url="../index/index">跳转到新页面</navigator><navigator url="../index/index"open-type="redirect">在当前页打开</navigator><navigator url="../index/index"open-type="switchTab">切换到首页Tab</navigator>
方法二:
bindTp:function(){ //保留当前页面,跳转到应用内的某个页面 wx.navigateTo({ url:'' }) //关闭当前页面,跳转到应用内的某个页面 wx.redirectTo({ url: '', }) //跳转到tabBar页面,并关闭其他所有的tabBar页面 wx.switchTab({ url: '', }) //返回上一页面或多级页面 wx.navigateBack({ data:1 }) },
三、设置页面分享
onShareAppMessage: function () { return { title: '周公解梦', path: '/pages/index/index', success: function (res) { console.log(res) } } }
带参数页面分享
onShareAppMessage: function () { return { title: '周公解梦', path: '/pages/index/index?id=3', success: function (res) { console.log(res) } } }
获取传递过来的参数
onLoad: function (options) { if (options.uid != undefined){ wx.showToast({ title: '来自用户:' + options.uid +"的分享", icon:'success', duration:2000 }) }}
四、微信小程序之选项卡
在发现选项卡之前,要想实现这个功能我只能想到写多个xml文件实现转换,或者在wxml界面进行判断,今天又get到一个新技能!可惨考以下网址:http://www.wxapp-union.com/article-2350-1.html
wxml文件:
<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">最新</view> <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">热门</view> </view> <view class="mjlist" wx:for="{{dreams}}"><view class="nrzt" bindtap="dream" data-dreamCode="{{item.dreamCode}}"><view class="nrztz"><view class="tx"><image src="{{item.memberAvatar}}" style="width: 40px; height: 40px;"></image></view><view class="nr"><view class="mc">{{item.memberName}}</view><view class="mj">{{item.dreamDetail}}</view><view class="ms"><image src="../../images/timeIcon.png" style="width: 15px; height: 15px; position: relative; top:3px;"></image>{{item.dateAdd}} <image src="../../images/message.png" style="width: 15px; height: 15px; position: relative; top:3px;"></image>已有{{item.dreamOneiromancy}}人解梦</view></view><view class="yj"><image src="../../images/zjt.png" style="width: 40px; height: 40px;"></image></view></view></view></view><!--梦境列表--><view class="ckgd" bindtap="more" data-property="{{property}}">+ 查看更多 +</view><!--不太清楚下面的swiper-item的作用,但是把它们都删掉以后功能却无法实现,只好保留将其样式设为隐藏--><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px; display:none;" bindchange="bindChange"> <swiper-item> <!--<view>热门</view> --> </swiper-item> <swiper-item> <!--<view>关注</view> --> </swiper-item> </swiper>
wcss文件
.nav{ width: 100%; height: 50px; margin: 0 auto; background: #fff; border-bottom: 1px solid #e8e3dd;}.nav .navz{ width: 50%; height: 50px; float:left; background:#f9f9f9; border-right: 1px solid #e8e3dd; text-align: center; line-height: 50px; color:#7e7e7e; font-size: 18px;}.nav .navy{ width: 49%; height: 50px; float: right; background: #fff; line-height: 50px; color:#bcbcbc; font-size: 18px; text-align: center;}/*梦境列表*/.mjlist{ width: 100%; height: auto; margin: 0 auto; background: #fff; border-bottom:1px solid #e8e3dd; padding-top: 10px; padding-bottom: 10px; overflow: hidden;}.mjlist .nrzt{ width: 90%; height: auto; margin: 0 auto;}.mjlist .nrztz{ width: 100%; height:auto; margin: 0 auto;}.mjlist .nrztz .tx{ width: 17%; height: auto; float: left;}.mjlist .nrztz .nr{ width: 65%; height: auto; float:left;}.mjlist .nrztz .nr .mc{ width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #b2b2b2;}.mjlist .nrztz .nr .mj{ width: 100%; line-height: 20px; font-size: 14px; color: #666;}.mjlist .nrztz .nr .ms{ width: 100%; height: 24px; line-height: 24px; font-size: 13px; color: #b2b2b2;}.mjlist .nrztz .yj{ width: 15%; height: auto; float: right; } .ckgd { width: 100%; height: 45px; margin: 0 auto; background: #fff; line-height: 45px; text-align: center; color: #b7b7b7; font-size: 14px; } .swiper-tab{ width: 100%; height: 50px; border-bottom: 2rpx solid #eeeeee; text-align: center; line-height: 50px; background: #fff;} .swiper-tab-item{ font-size: 18px; display: inline-block; width: 50%; color: #666666; } .on{ color: #666; background:#f9f9f9;} .swiper-box{ display: block; height: auto; width: 100%; overflow: hidden; } .swiper-box view{ text-align: center; }
js文件
var app = getApp()var limit = app.globalData.limitvar url = app.globalData.urlvar i = 0Page({ data: { winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); console.log("bindChange"); if (e.detail.current=='0' ){ console.log("这是0"); that.newlist(); }else{ console.log("这是1"); that.hot(); } }, swichNav: function (e) { console.log("swichNav"); var that = this; if (this.data.currentTab === e.target.dataset.current) { console.log('false'); return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, onLoad: function (options) { var that= this wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); this.newlist(); }, })
五、小程序分页之点击加载更多
若想实现点击加载更多功能,主要是使用了concat函数,具体使用可以参考
http://www.jb51.net/article/98558.htm
onLoad: function (options) { var s="123" console.log(s) console.log(s.concat("aass")); }
阅读全文
0 0
- 微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡
- 微信小程序一些常用代码(2)——modal
- javascript页面跳转常用代码(转)
- 微信小程序——页面跳转
- javascript页面跳转常用代码
- javascript页面跳转常用代码
- javascript页面跳转常用代码
- javascript 页面跳转 常用代码
- JavaScript页面跳转常用代码
- JavaScript页面跳转常用代码
- javascript页面跳转常用代码
- javascript页面跳转常用代码
- JavaScript页面跳转常用代码
- JavaScript 页面跳转常用代码
- javascript页面跳转常用代码
- javascript页面跳转常用代码
- JS 页面跳转常用代码
- 微信小程序-页面跳转
- JMX设置远程访问
- Faster R-CNN Features for Instance Search
- cutePE:自己写的PE文件结构查看器
- 评论内容观点抽取
- Python 不同方法的区别和调用
- 微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡
- app登录时用QQ或者微信授权登录,及找回密码功能
- java二叉树的前中后序,深度优先,广度优先(层序)遍历
- 白鹭EGRET使用龙骨DRAGONBONES骨骼动画
- python DEAP学习3(遗传算法) 0-1背包问题
- table表格合并跨行中相同元素的列
- 没有找到draw9patch.bat
- android studio中kotlin语言生成API文档工具GenerateDokka
- ElasticSearch基础教程