目前为止,小程序的广泛流行,越来愈多的人开始进行小程序的开发,由于开发成本相对较低,使用范围更广,也有越来愈多的客户需要在使用小程序,也使得更多的小程序功能被需要。今天呢,就简单的介绍一下,如何实现小程序的左右分栏,话不多说,直接上代码吧
wxml:
<view class="show-info">
<scroll-view class='left' scroll-y="{{true}}">
<view class="price-list">
<block wx:for="{{priceList}}" wx:key="index">
<view class="price-item" hover-class="price-item-hover">{{item}}</view>
</block>
</view>
</scroll-view>
<scroll-view class='right' scroll-y="{{true}}" scroll-into-view="{{viewId}}">
<swiper autoplay="{{true}}" indicator-dots="{{true}}" class="swiper-box">
<block wx:for="{{[1,2,3,4,5]}}" wx:key="item">
<swiper-item class="item">
<image src="/assets/images/swiper.png" />
</swiper-item>
</block>
</swiper>
<view class="recom-list">
<block wx:for="{{[1,2,3,4,5,6]}}" wx:key="item">
<view class="recom-item">
<view class="goods">
<image src="/assets/images/goods.png" />
</view>
<view class="goods-content">
<view class="hot-goods">热卖</view>
<view class="goods-title">JKL-3野生富硒皇家典藏 2瓶装</view>
</view>
<view class="goods-footer">
<view class="price-box">
<text class="dollar">¥</text>
<text class="price">3168</text>
</view>
<view class="buy">
<image src="/assets/images/cart_icon.png" />
<view class="purchase">购买</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
wxss:
.show-info {
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 20rpx 0;
box-sizing: border-box;
}
.left {
width: 23%;
height: 100%;
display: flex;
flex-direction: column;
}
.price-item {
/* width: 130rpx; */
height: 112rpx;
line-height: 112rpx;
text-align: left;
font-size: 14px;
color: #333;
padding-left: 30rpx;
}
.price-item-hover {
background: #F7F2E8;
border-left: 2px solid #C41E25;
}
.right {
width: 72%;
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
实现的效果图:
涉及到的知识点:
<scroll-view>:可是滚动区域,通过wxss可以给此组件设一个高度
scroll-y:是否允许纵向滚动,默认为false
hover-class:设置点击下去的样式,当“hover-class='none'的时候,没有点击效果
wx:for 在组件上使用wx:for控制属性绑定一个数组,可以用该数组中的内容渲染该组件,默认的数组当前的下标为index,默认的数组当前的变量名为item,可以通过wx:item="想要的名字"来修改。
bindtap:绑定点击事件