微信小程序-横向滑动scroll-view隐藏滚动条

wxml

 <scroll-view class="recommend_scroll_x_box" scroll-x="true">
      <view class="recommend_hot_box" wx:for="{{hotList}}">
        <image src="{{item.pic}}" class="recommend_hot_image"></image>
      </view>
    </scroll-view>

wxss

.recommend_scroll_x_box {
  height: 245rpx;
  white-space: nowrap;
  display: flex;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.recommend_hot_box {
  width: 230rpx;
  height: 245rpx;
  margin-right: 24rpx;
  display: inline-block;
}

.recommend_hot_image {
  width: 230rpx;
  height: 143rpx;
}

js

Page({
  data: {
    hotList: [
      {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }, {
        pic: '/images/example2.png',
        title: '玻璃棧道',
        desc: '22W人去過'
      }
    ]
  }

这里写图片描述

### 微信小程序中带有X轴滚动功能的折线图实现微信小程序实现带X轴滚动功能的折线图可以通过多种方式完成,这里主要介绍基于`u-charts`组件的方式以及如何配置其属性来支持这一特性。 对于希望采用更简便的组件化集成方案而非传统通过JavaScript文件引入并实例化的开发者来说,`u-charts`提供了一种较为直观的选择[^1]。为了使图表具备沿X轴方向上的可滑动查看能力,在初始化选项设置时需特别关注几个参数: - `scrollable`: 设置为true开启水平滚动条- `categories`: 定义横坐标类别名称数组,当数量较多超出屏幕宽度时会触发自动缩放和平移效果。 - `dataLabel`: 控制是否显示数值标签,默认关闭;如果打开则需要注意布局调整以免影响用户体验。 - `extra`: 额外样式定制对象内含多个子项用于微调视觉呈现细节,比如网格线条颜色、字体大小等。 下面给出一段具体的代码片段作为参考案例展示如何构建这样一个具有交互特性的动态曲线视图: ```html <!-- wxml --> <view class="charts"> <canvas canvas-id="lineCanvas" id="lineCanvas"></canvas> </view> ``` ```javascript // js import uCharts from '../../components/u-charts/u-charts.js'; let canvaLineA = null; Page({ onReady() { this.getServerData(); }, getServerData(){ wx.request({ url: 'https://example.com/api/data', // 替换成实际的数据接口地址 success:(res)=>{ let LineA={}; try{ LineA=new uCharts({ $this:this, type:'line', animation:false, fontSize:11, legend:{show:true}, title:{ name:'', color:'#7CB5EC' }, subtitle:{ name:'单位:次/分钟', color:'#666666', fontSize:10 }, categories:[...Array(24).keys()].map(i=>'时间'+i), // 假设一天有24个小时点位 series:[ { name:"心率", data:[Math.random()*100|0 for(let i=0;i<24;i++)], format:(val)=>`${val} bpm`, index:0 } ], xAxis:{ disableGrid:true, scrollable:true, // 启用横向滚轮 boundaryGap:['5%','5%'] }, yAxis:{ gridType:'solid', dashLength:8, splitNumber:5, min:0, max:120, format:(val)=>`${val}`, scale:true }, width:myChart.width, height:myChart.height, extra:{ lineStyle:'curve' // 平滑过渡风格 } }); canvaLineA=LineA; }catch(e){ console.log('u-charts 折线图绘制失败:',e); } } }) } }) ``` 此段脚本首先定义了一个简单的页面结构用来容纳绘图区域,接着利用`wx.request()`函数模拟获取远程服务器端返回的心跳速率序列,并以此为基础构造出满足需求规格说明的对象字典传递给`uCharts`类构造器进行渲染处理。值得注意的是,此处启用了`xAxis.scrollable=true`以允许用户拖拽浏览整个时间段内的变化趋势。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值