两列图片可滑动

青旅半醒 2022-04-22 04:04 160阅读 0赞

做了一个只显示两列的可滑动的view，可以根据图片多少来添加宽度，反正只是显示两列。

这种类似的只有两种样式，一个是单列，一个是多列。

话不多说

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

这是样式，也可以自己修改成喜欢的样式。

.hovertxt{
       margin: 10rpx;
      width: 140rpx;
      height: 140rpx;
      }
    .hovertxt image{
      width: 100%;
      height: 100%;
    }
    
    .w20{display:inline-block;word-wrap : break-word ;word-break:break-all; text-align: center;}
    
    .sc-wai0{
      width: 100%;
      height: 360rpx;
      overflow: hidden;
      border-bottom: 1rpx solid #ccc;
    }
    .sc-wai{
      width: 100%;
      background: #F76551;
      margin: 0 auto; 
      padding: 10rpx 0rpx;
      height: 400rpx;
      overflow: hidden;
      overflow-x: scroll;
    }
    .sc-nei{
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 400rpx;
      width: 100%;
      margin: 0 auto; 
      padding: 10rpx 0rpx;
    
    }

// pages/brand/brand.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        plist:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
        view: { Width: 10000 } ,
        clist:[1,1,1,1,1,,],
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let that = this;
        let plist = that.data.plist;
        let v = that.data.view;
        let w = (plist.length * 160)/2 ;
        v.Width = w;
        that.setData({
          view:v
        })
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220422/d87d29a387044c85aa3d8a616ed2f298.png