微信小程序Scroll-view的一个心得

最新推荐文章于 2025-03-18 20:23:38 发布

大狗不是狗

最新推荐文章于 2025-03-18 20:23:38 发布

阅读量1.9k

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/baidu_33548663/article/details/81131474

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

在开发微信小程序时，遇到Scroll-view使用问题，通过研究开发文档解决了点击无响应的难题，关键在于正确设置高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写小程序突然要用到Scroll_view看了网上好多的教程，然后自己写发现都不对，最后仔仔细细的看了一遍开发文档才知道那里错了。

当时是这样写的

<scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">
    <view wx:for="{{adressMessages}}"  id="{{item.ids}}">
        <text class='diming'>{{item.diming}}</text>
        ...
    </view>
</scroll-view>

<!这里设置浮动按钮，点击跳转>
 <view class='fudong'>
        <view wx:for="{{btnMessages}}">
            <view class='city'>
                <text bindtap='click' data-id="{{item.id}}">{{item.city}}</text>
            </view>
            <view><text decode="{{true}}">&nbsp;</text></view>
      </view>
</view>

只写一个浮动的css

.fudong{
    float: right;
     /* background-color: red; */
    position: fixed;
     bottom: 150px; 
    right: 10rpx;  
    /* border: 0 solid #ffffff; */
       /* border-radius: 25%;    */
    /* box-shadow: 4px 1px 1px #cccccc; */
     width: 50rpx; 
     height: auto; 
     font-size: 25rpx;
     font-weight: bold;
  }

data: {
      toView: '',
      adressMessages:[
          { 'diming': '杭州总部','ids':'ai'},
          { 'diming': '衢州分部','ids': 'bi' },
          { 'diming': '宁波分部','ids': 'ci' },
          { 'diming': '金华分部','ids': 'di'},
          { 'diming': '温州分部','ids': 'ei' },
          { 'diming': '绍兴分部','ids': 'fi' },
          { 'diming': '丽水分部','ids': 'gi' },
          { 'diming': '台州分部','ids': 'hi'},
      ],
      btnMessages:[
        {'city':'杭','id':'ai'},
        { 'city': '衢', 'id': 'bi' },
        { 'city': '宁', 'id': 'ci' },
        { 'city': '金', 'id': 'di' },
        { 'city': '温', 'id': 'ei' },
        { 'city': '绍', 'id': 'fi' },
        { 'city': '丽', 'id': 'gi' },
        { 'city': '台', 'id': 'hi' },
      ]
  
  },
 click:function(e){
        var id=e.currentTarget.dataset.id
       this.setData({
           toView:id
       })
    },

运行之后发现点击没什么反应，这里看开发文档如下：

所以我们要加一个height

 <scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true" style="height: 500px;">