美文网首页前端
微信小程序仿豆瓣电影页面demo(2)--实现"正在热映"与"即

微信小程序仿豆瓣电影页面demo(2)--实现"正在热映"与"即

作者: 我追求的小世界 | 来源:发表于2018-03-10 18:49 被阅读0次

    接着上文继续~(上文地址:https://www.jianshu.com/p/64c2ca4f1d92
    要完成的页面效果:
    tab切换.gif

    一、 "正在热映"与"即将上映"tab切换

    1. 编辑home.wxml文件:
     <view class="page">
      <view class="nav">
        <view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在热映</view>
        <view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即将上映</view>
      </view>
      <view class="{{homeSelected?'show':'hidden'}}">
       <view class="nav-text">正在热映</view>
      </view>
      <view class="{{comingSelected?'show':'hidden'}}">
       <view class="nav-text">即将</view>
      </view> 
    </view> 
    

    通过bindtap绑定点击事件控制显示与隐藏,tap表示手指触摸后马上离开, 绑定事件的key以bind或catch开头,然后跟上事件的类型,如bindtap、catchtap等,区别在于bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡,可以自己写个小demo测试下。微信小程序事件详见官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

    1. 编辑home.js文件
    Page({
      data: {
        homeSelected:true,
        comingSelected:false
      },
      handleHomeSelected(e){
        this.setData({
          homeSelected: true,
          comingSelected: false
        })
      },
      handleComingSelected(e) {
        this.setData({
          homeSelected: false,
          comingSelected: true
        })
      }
    })      
    

    在data中定义homeSelected与comingSelected属性,初始化homeSelected为true(即选中正在热映);绑定事件中通过this.setData({ //... })方式改变data当中的值,与react写法相似。

    1. 编辑home.wxss样式文件
    .nav{
      width:100%;
      height:80rpx;
      display:flex;
      position:fixed;
      top:0;
      left:0;
      background-color: #ffffff;
      z-index: 999;
    }
    .default,.current{
      height:100%;
      line-height:80rpx;
      width:50%;
      text-align:center;
      border-bottom:1px solid #dfdfdf; 
    }
    .current{
       border-bottom:2px solid #000000;
    }
    .show{
      display:block;
    }
    .hidden{
      display:none;
    }
    .nav-text{
      margin-top:80rpx;
    }
    

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。比如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1px = 2rpx;
    采用flex布局,由于电影列表会向下翻页,tab导航设置position:fixed;固定布局, "正在热映"与"即将上映"宽度各占50%。

    未完待续,接着会调用豆瓣接口获取电影列表~
    如果文中有什么不对的或者需要注意的地方欢迎大家指正,一起分享交流~
    接下文 微信小程序仿豆瓣电影页面demo(3)--获取电影列表:
    https://www.jianshu.com/p/4734a162ccff

    本文著作权归作者所有,如需转载,请联系本人并标明出处及原链接。

    相关文章

      网友评论

        本文标题:微信小程序仿豆瓣电影页面demo(2)--实现"正在热映"与"即

        本文链接:https://www.haomeiwen.com/subject/eqepfftx.html