企尚网络论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 282|回复: 0

小程序 scroll-view 横向滚动

[复制链接]

182

主题

237

帖子

2743

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2743
发表于 2019-3-14 12:48:11 | 显示全部楼层 |阅读模式
  1. <view class="scrollnav">
  2. <scroll-view class="scroll-view_h" scroll-x scroll-left="scrollLeft"  style="width: 100%;">
  3.     <view class="scroll-view-item_h">资讯中心</view>
  4.     <view class="scroll-view-item_h">数字经济案例库</view>
  5.     <view class="scroll-view-item_h">区块链</view>
  6.     <view class="scroll-view-item_h">学习中心</view>
  7.     <view class="scroll-view-item_h">数字经济案例库</view>
  8.     <view class="scroll-view-item_h">区块链</view>
  9.     <view class="scroll-view-item_h">学习中心</view>
  10.     <view class="scroll-view-item_h">数字经济案例库</view>
  11.     <view class="scroll-view-item_h">区块链</view>
  12.     <view class="scroll-view-item_h">学习中心</view>
  13.   </scroll-view>
  14. </view>
复制代码
  1. const app = getApp()
  2. Page({
  3.     scrollLeft: 100
  4.   },
  5.   //事件处理函数
  6.   bindViewTap: function() {

  7.   },
  8.   onLoad: function () {
  9.    
  10.   },
  11.   fn(e) {
  12.     this.setData({
  13.       swiperCurrent: e.currentTarget.dataset.i
  14.     })
  15.   },
  16.   swiperChange: function (e) {
  17.     this.setData({
  18.       swiperCurrent: e.detail.current
  19.     })
  20.   },
  21.   scroll(e) {
  22.     console.log(e)
  23.   },
  24.   tap(e) {
  25.     for (let i = 0; i < order.length; ++i) {
  26.       if (order[i] === this.data.toView) {
  27.         this.setData({
  28.           toView: order[i + 1]
  29.         })
  30.         break
  31.       }
  32.     }
  33.   },
  34.   tapMove(e) {
  35.     this.setData({
  36.       scrollTop: this.data.scrollTop + 10
  37.     })
  38.   }
  39. })
复制代码
  1. .scrollnav{
  2.   width:100%;
  3.   height: 80rpx;
  4. }
  5. .scroll-view_h{
  6.   width: 100%;
  7.   height: 80rpx;
  8.   white-space: nowrap;
  9. }
  10. .scroll-view-item_h{
  11.   display: inline-block;
  12.   font-size: 28rpx;
  13.   padding: 0 30rpx;
  14. }
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Archiver|企尚网络论坛 ( 陕ICP备15000158号-1

GMT+8, 2019-11-20 09:42 , Processed in 0.078248 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表