小程序的各种场景及实现

一，利用swiper实现点击tab滑动到另一个页面（严格意义叫组件）

代码模板：
HTML

<!-- 滑动导航栏：控制滑动页面的显示 -->
<view class="nav"><view id="0" class="{{currentIndex==0?'select':'normal'}}" bindtap="swiperNav">上映</view><view id="1" class="{{currentIndex==1?'select':'normal'}}" bindtap="swiperNav">影院</view><view id="2" class="{{currentIndex==2?'select':'normal'}}" bindtap="swiperNav">我的</view>
</view>
<!-- 滑动页面：三个 -->
<!-- swiper配合导航可以做滑动页面 -->
<!-- 配合图片可以做轮播图 -->
<swiper current="{{currentIndex}}" style="height:{{winHeight}}px;"><swiper-item><!-- 第一个子页面的内容 --></swiper-item><swiper-item>第二个子页面的内容</swiper-item><swiper-item>第三个子页面的内容</swiper-item>
</swiper>

CSS

.nav{display: flex;background-color: #222222;
}
.select{width: 33.33%;height: 45px;line-height: 45px;text-align: center;color: #fff;font-size: 13px;border-bottom: 10px solid #777;
}
.normal{width: 33.33%;height: 45px;line-height: 45px;text-align: center;color: #fff;font-size: 13px;
}

js:

  data: {currentIndex:0,},swiperNav(e){//获取触发事件标签的所有属性集合对象this.setData({currentIndex:e.currentTarget.id}) },

二，wx.getSystemInfo获取设备信息

  //保存this(箭头函数会影响this)var page=this//获取系统信息（用什么设备打开的这个页面）wx.getSystemInfo({success (res) {//获取可使用的窗口的宽高page.setData({winwidth:res.windowWidth,winHeight:res.windowHeight})}})

三，wx.request（{}）获取服务器数据

  onLoad: function (options) {//保存this(箭头函数会影响this)var page=this//调用自定义函数：请求电影接口page.loadMovies()},//开始时通过wx.request的豆瓣api接口获取电影数据loadMovies(e){var page=thiswx.request({url:'http://v.juhe.cn/movie/movies.today',method:'GET',data:{key:'ccdb384321516c799d2dbd2f2ed121b8',cityid:3},header:{"Content-Type":"json"},success(res){console.log(res)}})},

四，和一很像：顶部的滑动导航

原理：

这里的class=nav的需要有，由它给定了scroll的宽度
代码地址：
https://blog.csdn.net/weixin_42349568/article/details/110596387

小程序的各种场景及实现相关推荐

微信小程序想通过场景化缩短路径
场景化的最短路径脱离场景讲缩短路径是耍流氓,不妨举几个例子. 6.1 线下场景一个小程序能生成 10000 个带参数二维码,用户通过不同的二维码可以进入同一个小程序不同的页面. 拿前面公交车的例子 ...
关于个人如何接入微信支付接口，适用于h5，小程序等应用场景
关于个人如何接入微信支付接口,适用于h5,小程序等应用场景, 众所周知,要想使用微信支付实现公众号.商城.小程序.h5网页等产品或者服务购买,需要申请微信小程序或者服务号,并且要企业认证,还要提交微信 ...
微信小程序多音频场景处理 - 背景音频
微信小程序多音频场景处理 - 背景音频提到音频播放控制,不得不提背景音频这个方法wx.getBackgroundAudioManager 很不幸,这个有坑.当使用场景为单音频播放或者不需要记录每个音 ...
微信在线答题小程序的应用场景有哪些
微信在线答题小程序应用遍及各行各业,深受各级党政机关,企事业单位,教育机构等青睐使用. 那么,微信在线答题小程序的应用场景有哪些? 实在太多太多了. 那能不能举例说说? 当然可以,就先列举几个例子吧. ...
微信小程序适合哪些场景
2017年1月9号,微信小程序经历一年多时间正式发布公测,张小龙发布会上再一次阐述微信推出小程序的初衷:让信息触手可及,改变应用程序需要下载.安装的繁琐过程. 这也确定可小程序的定位:无须安装.触手可 ...
【干货】多案例解析小程序的全场景跨端运营
以下为友盟+资深数据分析师.数据传承官相峥,友盟+产品专家范芊芸在人人都是产品经理活动上的演讲实录: 大家好,我是友盟+的相峥,今天给大家带来的分享主题是<小程序跨端运营全效洞察>. 小程 ...
【微信小程序】：小程序，新场景
前言: 我们频繁进入的地方,是场景. 手机.是场景:浏览器.是场景.事实上,微信,也是场景-- 微信要做的是占领很多其它用户时间.占领很多其它应用场景.占领很多其它服务入口.这是商业本质想去垄断要做的 ...
小程序的应用场景有哪些？小程序实际应用分析
大家对小程序都不陌生,在日常生活中也有用到,其实主要还是因为小程序能够提供便捷的功能,很多商家喜欢用小程序,主要是因为小程序的推广方式有很多,比如有用户主动搜索发现,或者是通过公众号推送给用户,还有要 ...
微信小程序的所有场景值
场景值ID 说明 1001 发现栏小程序主入口 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1007 单人聊天会话中的小程序消息卡片 1008 群聊会话中的小程序 ...
小程序开发之场景值及使用方法
场景值场景值ID 说明 1001 发现栏小程序主入口,"最近使用"列表 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1007 单人聊天会话中 ...

小程序的各种场景及实现

一，利用swiper实现点击tab滑动到另一个页面（严格意义叫组件）

二，wx.getSystemInfo获取设备信息

三，wx.request（{}）获取服务器数据

四，和一很像：顶部的滑动导航

小程序的各种场景及实现相关推荐

最新文章

热门文章