两列图片可滑动

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

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

话不多说

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

<view class='sc-wai0'>
<view class='sc-wai'>
    <view class='sc-nei' style="width:{{view.Width}}rpx; display: block">
        <view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}" wx:for="{{plist}}">
          <image mode='scaleToFill' src='../../images/fang.jpg'></image>
        </view> 
    </view>
</view>
</view>


.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 () {

  }
})

猜你喜欢