微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)

简介: 微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)

微信小程序横向滚动

//wxml
      <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" 
      scroll-into-view="{{rightId}}" >
      <view    style="display: inline-block">1</view>
      <view     style="display: inline-block">2</view>
      <view     style="display: inline-block">3</view>
      <view    style="display: inline-block">4</view>
      <view   id="select_title"  style="display: inline-block">5</view>
</scroll-view>
//wxss
#select_title{
  color: #F2A669;
}
  1. scroll-x=“true” style=" white-space: nowrap; display: flex" 开启横向滚动必须设置的
  2. scroll-into-view="{{rightId}}" 设置滚动到那个元素的 参数接收一个id名
  3. id=“select_title” id名
    4.子元素必须设置 style=“display: inline-block”
//js
data:{
  rightId:null
  },
  //页面加载时
  onLoad:function(){
this.setData({
      rightId: 'select_title',
    })
}

微信小程序纵向滚动

//wxml
        <scroll-view scroll-y   scroll-into-view="{{scrollTopName}}" >
      <view>1</view>
      <view>2</view>
      <view>3</view>
      <view>4</view>
      <view   id="scrollTabTop"  >5</view>
      </scroll-view>
//wxss
#scrollTabTop{
height:100vh;
  background-color: #F6F6F6;
}

1.必须设置高度

//js
data:{
  scrollTopName:null
  },
  //页面加载时
  onLoad:function(){
this.setData({
      scrollTopName: 'scrollTabTop',
    })
}
目录
打赏
0
1
1
0
8
分享
相关文章
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
284 0
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
1057 0
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
97 0
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
87 0
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
52 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
445 3
|
3月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
68 0
微信小程序更新提醒uniapp