美文网首页网页前端后台技巧(CSS+HTML)前端笔记让前端飞
小程序开发实例技巧(二)横向滑动切换列表效果

小程序开发实例技巧(二)横向滑动切换列表效果

作者: 菜菜___ | 来源:发表于2019-01-14 12:37 被阅读10次

    在项目开发中,我们经常会对数据进行分组并且循环加载,像今日头条app首页那样,今天动手写了个类似的demo,效果图如下:



    主要涉及到:

    scroll-view可滚动视图区域组件,swiper滑块视图容器,以及for循环列表数据。

    第一步:打开微信开发者工具,新建一个小程序项目,或者直接在已有的小程序项目里新建一个test文件夹,文件夹目录如下:


    test.wxml代码:

    <view>
      <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
        <block wx:for-items="{{newsTab}}">
          <view data-current="{{index}}" class="tab-item {{currentTab == index ?'active':''}}" bindtap="swichNav" >
            {{item}}
          </view>
        </block>
      </scroll-view>
      <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
          <scroll-view scroll-y="true" class="scoll-h">
            <block wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:key="*this">
              <view class="item">
                <view class="img">
                  <image src="{{authorList.img}}"></image>
                </view>
                <view class="author-info">
                  <view class="name">{{authorList.name}}</view>
                  <view class="tag">{{authorList.tag}}</view>
                  <view class="answerHistory">{{authorList.answer}}个回答,{{authorList.listen}}人听过 </view>
                </view>
                <navigator url="" class="shouting">关注</navigator>
              </view>
            </block>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    

    test.js代码:

    var app = getApp();
    Page({
      data: {
        winHeight: "",//窗口高度
        currentTab: 0, //预设默认选中的栏目
        scrollLeft: 0, //tab滚动条距离左侧距离
        newsTab: ["健康", "情感", "职场", "育儿", "文学","青葱","科技","达人"],
        authorList: {
          img: "http://ookzqad11.bkt.clouddn.com/avatar.png",
          name: "欢顔",
          tag: "知名情感博主",
          answer: 134,
          listen: 2234
        }
      },
      // 滚动切换标签样式
      switchTab: function (e) {
        this.setData({
          currentTab: e.detail.current
        });
        this.checkCor();
      },
      // 点击tab切换当前页时改变样式
      swichNav: function (e) {
        var cur = e.target.dataset.current;
        if (this.data.currentTab == cur) {
          return false;
        }
        else {
          this.setData({
            currentTab: cur
          })
        }
      },
      //判断当前滚动超过一屏时,设置tab向左滚动。
      checkCor: function () {
        if (this.data.currentTab > 4) {
          this.setData({
            scrollLeft: 300
          })
        } else {
          this.setData({
            scrollLeft: 0
          })
        }
      },
      onLoad: function () {
        var that = this;
        //  高度自适应
        wx.getSystemInfo({
          success: function (res) {
            var clientHeight = res.windowHeight,
              clientWidth = res.windowWidth,
              rpxR = 750 / clientWidth;
            var calc = clientHeight * rpxR - 180;
            that.setData({
              winHeight: calc
            });
          }
        });
      }
    })
    

    test.wxss代码:

    .tab-h {
      height: 100rpx;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      line-height: 80rpx;
      background: #f7f7f7;
      font-size: 16px;
      white-space: nowrap;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .tab-item {
      margin: 0 36rpx;
      display: inline-block;
    }
    .tab-item.active {
      color: #4675f9;
      position: relative;
    }
    .tab-item.active:after {
      content: "";
      display: block;
      height: 8rpx;
      width: 66rpx;
      background: #4675f9;
      position: absolute;
      bottom: 0;
      left: 5rpx;
      border-radius: 16rpx;
    }
    .tab-content {
      margin-top: 100rpx;
    }
    .tab-content .author-info{
      font-size: 12px;
      flex-grow: 3;
      color: #b0b0b0;
      line-height: 1.5em;
    }
    .tab-content .author-info .name {
      font-size: 16px;
      color: #000;
      margin-bottom: 6px;
    }
    .item {
      display: flex;
      width: 100%;
      padding: 30rpx;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
    }
    .img {
      width: 100rpx;
      height: 100rpx;
      position: relative;
      padding-right: 30rpx;
    }
    .img image {
      width: 100%;
      height: 100%;
    }
    .shouting {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 14px;
      border-radius: 60rpx;
      border: 1px solid #4675f9;
      color: #4675f9;
    }
    .scoll-h {
      height: 100%;
    }
    

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流。

    相关文章

      网友评论

        本文标题:小程序开发实例技巧(二)横向滑动切换列表效果

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