小程序值左侧滑动点击对应渲染右边滑动

1 这是wxml

<view class='bg_nav'> <view > <label class="bg_title">满减</label> <label>满80减90</label> </view></view><view class='borer_top dis-flex flex-justify mg_top20'> <scroll-view scroll-y class='w_173' style='height:{{windowHeight}}px'> <view wx:for="{{productData}}" data-id="{{item.classify_id}}" data-index="{{index}}" class='{{index==indexs?"scroll_atc2":"scroll_atc1"}} ' bindtap='tap_product'> {{item.classify_name}} </view>  </scroll-view> <scroll-view class='w_557' scroll-y style="height:{{windowHeight}}px"> <view wx:for="{{proBlcokData}}" wx:for-item="index_one"> <view class='f_24 pd_50bt30'>{{index_one.classify_name}}</view> <view class='flex-wrapr borer_bottom'> <view class='center pd_bt20' wx:for="{{index_one.category3}}" wx:for-item="index_two" data-categoryId="{{index_two.classify_id}}" data-prid="{{index_two.parent_id}}" data-name="{{index_two.classify_name}}" bindtap='navTo_name'> <image class='wh_100' src='{{index_two.img}}'></image> <view class='f_24'>{{index_two.classify_name}}</view> </view> </view> </view> </scroll-view></view>

1 这是wxss

.bg_nav{background: rgba(255, 215, 0, 0.1);margin:20rpx 15rpx;padding:15rpx 40rpx;}.bg_title{background: #E52E31;padding:10rpx 30rpx;margin-right:20rpx;border-radius:6rpx;color:#fff}.bg_title{font-size:30rpx;}.dis-flex{ display: flex; display: -webkit-flex;}.flex-justify{ justify-content:space-between; -webkit-justify-content:space-between;} page{ background: #fff; overflow: hidden;} .center{text-align:center;width:175rpx;} .pd_50bt30{padding-top:50rpx;padding-bottom:30rpx;padding-left:26rpx;} .pd_bt20{padding-bottom:20rpx;} .top-region{ padding:0 30rpx; padding-top: 20rpx; z-index: 99; opacity: .8; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s;}.search{ position: relative; border-radius: 100rpx; padding-right: 28rpx;}.search .search-input{ width: 560rpx; height: 58rpx; line-height: 58rpx; border-radius: 100rpx; background: #F2F2F2; font-size: 22rpx; color: #ddd; padding-left: 56rpx;}.search .search-icon{ position: absolute; top: 50%; left: 26rpx; margin-top: -14rpx; width: 28rpx; height: 28rpx; z-index: 10;}.menu{ margin-top: 14rpx;}.icon-menu{ width: 36rpx; height: 36rpx;} .f_24{font-size:24rpx}.f_22{font-size:22rpx} .w_173{width:173rpx;}.w_557{width:557rpx;}.w_185{width:185rpx;} .wh_100{width:100rpx;height:100rpx;} .borer_top{border-top:1px solid #F2F2F2;}.borer_bottom{border-bottom:1px solid #F2F2F2;} .mg_top20{margin-top:20rpx;} .scroll_atc1{ color:#333333; background:#F2F2F2; padding:30rpx; font-size:26rpx;} .scroll_atc2{ background:#fff; padding:30rpx 30rpx; font-size:26rpx; border-left:6rpx solid goldenrod }

3这是js

Page({ /** * 页面的初始数据 */ data: { productData: [{ classify_name: 'vr世界' },{ classify_name: 'vr世界2' }], oneId: '', windowHeight: '', indexs: 0, typeId: 1, proBlcokData: [{ classify_name:'1'}] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const that = this; const token = wx.getStorageSync('token'); that.setData({ token: token }) //获取手机高度初始化 that.getSystemInfo(); }, //获取手机设备信息 getSystemInfo: function () { const that = this; wx.getSystemInfo({ success: function (res) { const wh = res.windowHeight - 52; that.setData({ windowHeight: wh }) } }) }, // 点击标题 tap_product: function (e) { const that = this; that.setData({ indexs: e.currentTarget.dataset.index, oneId: e.currentTarget.dataset.id, }) //点击执行对应产品内容 that.ProductBlock(); }, //点击产品到搜索界面 navTo_name: function (e) { const that = this; wx.navigateTo({ url: `/pages/ShopSearch/ShopSearch?words=${e.currentTarget.dataset.name}&categoryId=${e.currentTarget.dataset.categoryid}`, }) }, // 点击进入购物车 go_gwc: function () { wx.navigateTo({ url: '/pages/Cart/Cart' }) },})

复制上面代码就可以得到该效果

小程序值左侧滑动点击对应渲染右边滑动

推荐阅读更多精彩内容