scroll-view的使用

1.图片的横向滚动
功能描述：添加图片，展示缩小的图片，点击可以放大，图片可以横向滑动显示，图片可以删除
/main.wxml

 <!-- 照片展示区域 -->
    <view class="ipt pic_ipt">
        <view class="pho_box">
            <!-- 图片左右滑动,加滚动条 -->
            <scroll-view class="scroll_view" scroll-x="true" scroll-left="{{scrollLeft}}">
                <block wx:for="{{images}}" wx:key="*this">

                    <view class="q-image-wrap pic">
                        <!-- 图片缩略图 -->
                        <image class="q-image pic_img" src="{{item}}" mode="aspectFill" data-idx="{{index}}"
                            bindtap="handleImagePreview"></image>
                        <!-- 移除图片的按钮 -->
                        <view class="q-image-remover pic_del" data-idx="{{index}}" bindtap="removeImage">
                            删除
                        </view>
                    </view>

                </block>
            </scroll-view>
        </view>
    </view>

/main.wxss

.ipt{
    display:flex;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #fff;
    border-bottom: 5rpx solid #efeff4;
    font-size: 30rpx;
}
/* 照片区域 */
.pho_ipt{
    width: 100%;
    height: 82rpx;
    line-height: 82rpx;
    background-color: #fff;
    font-size: 30rpx;
}
#pho_bar{
    width: 100%;
    height: 50px;
    position:relative;
}
/* 照片添加按钮 */
.pho_btn{
    position: absolute;
    right: 22rpx;
    top:50%;
    margin-top: -15px;
    width: 120rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    border:4rpx solid #ccc;
    border-radius: 5px;
    text-align: center;
}

.pho_box{
    width: 100%;
 
}
/* 照片显示区域 */
.pic_ipt{
    height: 200rpx;
}
.pic{
    /* 横向滚动一定要加上inline-block */
    display: inline-block;
}
.pic .pic_img{
   /* width: 20%; */
   height: 120rpx;
   width: 120rpx;
   /* background: pink; */
   margin-left: 22rpx;
}
.scroll_view{
    height: 200rpx;
    width: 100%;
    display: flex;
    /* 很重要，文本不会换行，会在同一行显示 */
    white-space: nowrap;
    
}
/* 图片删除按钮 */
.pic .pic_del{
   
    width: 120rpx;
    height: 40rpx;
    margin-left: 23rpx;
    margin-top: -4rpx;
    border:3rpx solid #ccc;
    text-align: center;
    line-height: 40rpx;
    border-radius: 10rpx;
    font-size: 27rpx;
}

main.js

//可以理解为在每个调用$digest(this)的地方调用了一次this.setData()的操作
import {
  $init,
  $digest
} from '../../utils/common.util'
// 添加图片 
  onAddpic: function () {
    var that = this;
    wx.chooseImage({
      // sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
      sizeType: ['compressed'], //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择访问相机、相册
      success(res) {
        // const that = getCurrentPages()[0]
        // console.log(res)
        // console.log(that)
        const images = that.data.images.concat(res.tempFilePaths)
        // 限制最多留下9张照片
        that.data.images = images.length <= 9 ? images : images.slice(0, 9)
        $digest(that);
        // console.log(that.$data.images);

      }
    })
  },
  //移除图片
  removeImage(e) {
    const idx = e.target.dataset.idx
    this.data.images.splice(idx, 1)
    $digest(this)
  },
  //点击图片进行大图预览
  handleImagePreview(e) {
    const idx = e.target.dataset.idx;
    const images = this.data.images
    wx.previewImage({
      current: images[idx], //当前预览的图片
      urls: images, //所有要预览的图片
    })
  },

2.文字的滚动
manage.wxml

 <scroll-view scroll-x class="li_con">
     <!-- 祝词 -->
    <text>{{item.text}}</text>
</scroll-view>

manage.wxss

/* 祝词 */
.li_con{
  display:inline-block; 
  height: 70rpx;
  line-height: 70rpx;
  margin-right:20rpx; 
  width: 100%;
  white-space: nowrap;/*强制文字在一行内显示*/
  font-size: 25rpx;
  color:#c7a82c;

}
.li_con text{
  display: inline-block;
  vertical-align: middle;/* 必须的！* /
  margin-right: -2000rpx;/*影响一行内存放的长度,重要*/
}

图片的上传参考的别人写的博客，上述所写仅供自己学习参考！