微信小程序之scroll-view

这篇文章主要介绍微信小程序scroll-view的相关资料,需要的朋友可以参考下

scroll-view 可滚动视图区域,官网给的相关属性如下图所示：

 

下面给大家分享一个我在开发过程中的用到scroll-view的实例

效果如图所示：

 

html结构如下所示:

 <!--活动推荐-->

    <view class="goods-lists1 activity-lists">

      <view class="goods-lists1-header">

        <text class="pull-left title">活动推荐</text>

        <text class="pull-right">{{slidenum}}/{{activity.length}}</text>

      </view>

      <view class="goods-lists1-body">

        <scroll-view class="recommend_scroll_x_box" scroll-x="true"  bindscroll="scroll2">

          <view id="{{item.id}}" class="goods-list1" wx:for="{{activity}}">

            <navigator url="{{item.url}}">

                <image src="{{item.image}}"></image>

                <text class="goods-name">{{item.name}}</text>

                <text class="goods-desc">{{item.desc}}</text>

              </navigator>

          </view>

        </scroll-view>

 

      </view>

</view>

样式这里就不在做说明，来看一下js

在data里面设置数据备用，如下图所示：

 data: {

    loadingHidden: false,

    slidenum: 1,//设置右上角数值的初始值

    activity:[

      { id: 1, url: '../activity-list/activity-list', image: '/images/activity01.jpg', name: '七夕人气单品', desc: '最新最热最好玩' },

      { id: 2, url: '../activity-list/activity-list', image: '/images/activity02.jpg', name: '七夕送女友', desc: '我在，无论何时都在你身边' },

      { id: 3, url: '../activity-list/activity-list', image: '/images/activity03.jpg', name: '七夕送男友', desc: '你在，就是最好的承诺' },

      { id: 4, url: '../activity-list/activity-list', image: '/images/activity04.jpg', name: '七夕情侣款', desc: '爱，是和你成双成对' },

      { id: 5, url: '../activity-list/activity-list', image: '/images/activity05.jpg', name: '七夕送自己', desc: '遇见你之前，我会好好照顾自己' },

    ]

  },

关于右上角的滑动数字变化，我是这样子处理的，大家可以参考一下，里面判断的数字根据自己样式做调整

//活动推荐滑动时数字变化

  scroll2: function (e) {

    if (e.detail.scrollLeft > 0 && e.detail.scrollLeft<100) {

      this.setData({

        slidenum: 1,

      });

    }

    if (e.detail.scrollLeft > 100 && e.detail.scrollLeft < 300) {

      this.setData({

        slidenum: 2,

      });

    }

    if (e.detail.scrollLeft > 300 && e.detail.scrollLeft < 500) {

      this.setData({

        slidenum: 3,

      });

    }

    if (e.detail.scrollLeft > 500 && e.detail.scrollLeft < 700) {

      this.setData({

        slidenum: 4,

      });

      console.log(1)

    }

    if (e.detail.scrollLeft > 700 && e.detail.scrollLeft < 900) {

      this.setData({

        slidenum: 5,

      });

    }

  },

注意事项：

1.使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height

2.请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

3.scroll-into-view 的优先级高于 scroll-top

4.在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

5.若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部