两列图片可滑动
做了一个只显示两列的可滑动的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 () {
}
})