1. 程式人生 > >兩列圖片可滑動

兩列圖片可滑動

做了一個只顯示兩列的可滑動的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 () {

  }
})