qt中实现左右分割线_小程序中实现菜单左右分栏

目前为止，小程序的广泛流行，越来愈多的人开始进行小程序的开发，由于开发成本相对较低，使用范围更广，也有越来愈多的客户需要在使用小程序，也使得更多的小程序功能被需要。今天呢，就简单的介绍一下，如何实现小程序的左右分栏，话不多说，直接上代码吧

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：绑定点击事件