兩列圖片可滑動
阿新 • • 發佈:2018-12-16
做了一個只顯示兩列的可滑動的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 () { } })