zoukankan      html  css  js  c++  java
  • 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动

    scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述

    一、横向滚动

    创建一个页面scroll-nav

     然后,在.wxml文件中排版

    <!--水平拖动新闻-->
      <scroll-view scroll-x class="menu">
        <view class="scroll-nav">
          <navigator url="">社会新闻</navigator>
          <navigator url="">娱乐新闻</navigator>
          <navigator url="">国际新闻</navigator>
          <navigator url="">国内新闻</navigator>
          <navigator url="">推荐新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
        </view>
      </scroll-view>

    navigator是导航,url中可以写跳转链接

    接着在wxss中设置样式

    .menu{
      background-color: lightcyan;
    }
    .scroll-nav{
      display: flex;
      white-space: nowrap;
      font-size: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
    
    .scroll-nav navigator{
      margin: 0 10rpx;
      font-weight: bold;
    }

    这样,横排拖动就完成了。

    二、纵向滚动

    在.wxml中排版

    <!--垂直新闻列表-->
      <scroll-view class="scroll-height" scroll-y>
        <view>
          <image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595429149507&di=e7c30e73176add768b756b4a8b0448b4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F29%2F20180429070534_bpfvj.jpg'></image>
          <view>各单位召开培训班</view>
          <image src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3995073927,3598178723&fm=26&gp=0.jpg'></image>
          <view>各单位召开培训班</view>
          <image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1585829999,2436051513&fm=26&gp=0.jpg'></image>
          <view>各单位召开培训班</view>
        </view>
      </scroll-view>

    image里面是在网上找的图片链接。

    在.wxss中设置样式

    page{
      height: 100%;
    }
    .scroll-height{
      height: 80%;
    }

    这个是说一个页面的大小为100%,纵向滚动的高度只取页面的80%就够了,所以滚动的部分也只是在页面的80%

    更明显一点,改为50%看看效果

    当然,如果不使用page的百分比,也可以自己指定高度为多少

    .scroll-height{
      height: 800rpx;
    }

    此时就不需要page了

    完整代码:

    scroll-nav.js

    // miniprogram/pages/scroll-nav/scroll-nav.js
    Page({
    
      /**
       * Page initial data
       */
      data: {
    
      },
    
      /**
       * Lifecycle function--Called when page load
       */
      onLoad: function (options) {
    
      },
    
      /**
       * Lifecycle function--Called when page is initially rendered
       */
      onReady: function () {
    
      },
    
      /**
       * Lifecycle function--Called when page show
       */
      onShow: function () {
    
      },
    
      /**
       * Lifecycle function--Called when page hide
       */
      onHide: function () {
    
      },
    
      /**
       * Lifecycle function--Called when page unload
       */
      onUnload: function () {
    
      },
    
      /**
       * Page event handler function--Called when user drop down
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * Called when page reach bottom
       */
      onReachBottom: function () {
    
      },
    
      /**
       * Called when user click on the top right corner to share
       */
      onShareAppMessage: function () {
    
      }
    })
    View Code

    scroll-nav.json

    {
      "usingComponents": {},
      "navigationBarTitleText": "scroll-view"
    }
    View Code

    scroll-nav.wxml

    <!--miniprogram/pages/scroll-nav/scroll-nav.wxml-->
    <view class="container">
    <!--水平拖动新闻-->
      <scroll-view scroll-x class="menu">
        <view class="scroll-nav">
          <navigator url="">社会新闻</navigator>
          <navigator url="">娱乐新闻</navigator>
          <navigator url="">国际新闻</navigator>
          <navigator url="">国内新闻</navigator>
          <navigator url="">推荐新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
          <navigator url="">法制新闻</navigator>
        </view>
      </scroll-view>
    
    <!--垂直新闻列表-->
      <scroll-view class="scroll-height" scroll-y>
        <view>
          <image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595429149507&di=e7c30e73176add768b756b4a8b0448b4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F29%2F20180429070534_bpfvj.jpg'></image>
          <view>各单位召开培训班</view>
          <image src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3995073927,3598178723&fm=26&gp=0.jpg'></image>
          <view>各单位召开培训班</view>
          <image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1585829999,2436051513&fm=26&gp=0.jpg'></image>
          <view>各单位召开培训班</view>
        </view>
      </scroll-view>
    </view>
    View Code

    scroll-nav.wxss

    /* miniprogram/pages/scroll-nav/scroll-nav.wxss */
    /* page{
      height: 100%;
    } */
    .menu{
      background-color: lightcyan;
    }
    .scroll-nav{
      display: flex;
      white-space: nowrap;
      font-size: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
    
    .scroll-nav navigator{
      margin: 0 10rpx;
      font-weight: bold;
    }
    
    .scroll-height{
      height: 800rpx;
    }
    View Code

    OK.

  • 相关阅读:
    Java基础——链表的添加、移除、反转
    Java基础——数组队列的原理和实现
    Java基础——String、StringBuiler、StringBuffer的用法和区别
    Java基础——解决JFrame.setBackground设置无效,mac系统IDEA编译器
    Java基础——文件查找创建删除
    Java基础——Java异常机制
    线性表的操作
    Linux目录及文件系统操作
    Linux用户及文件权限管理
    Linux日志系统
  • 原文地址:https://www.cnblogs.com/smart-zihan/p/13384301.html
Copyright © 2011-2022 走看看