小程序的各种场景及实现

一，利用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=this
    wx.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