uniapp实现左右滑动

<template><view class="content"><view class="model_box"><view class="model_title">推广营销</view><view class="model_scrollx flex_row"><scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'"><view class="scrollx_items tg_zdtg"><image src="/static/my/icon_tg1.png" mode=""></image><view class="tgyx_title">置顶推广</view><view class="tgyx_desc">搜索页最强特权</view></view><view class="scrollx_items tg_hot"><image src="/static/my/icon_tg2.png" mode=""></image><view class="tgyx_title">我要上热门</view><view class="tgyx_desc">多十倍商机</view></view><view class="scrollx_items tg_zshy"><image src="/static/my/icon_tg3.png" mode=""></image><view class="tgyx_title">钻石会员</view><view class="tgyx_desc">抢占无限商机</view></view><view class="scrollx_items tg_hjhy"><image src="/static/my/icon_tg4.png" mode=""></image><view class="tgyx_title">黄金会员</view><view class="tgyx_desc">提供供应排名</view></view></scroll-view></view></view></view>
</template>
<script>export default {data() {return {scrollH: 130}},onLoad() {uni.getSystemInfo({success: function(res) { // res - 各种参数let info = uni.createSelectorQuery().select(".scrollx_items");info.boundingClientRect(function(data) { //data - 各种参数console.log(data.height)  // 获取元素宽度this.scrollH = data.height}).exec()}});},onShow() {},methods: {}}
</script><style>/* 左右滑动 */.uni-swiper-tab{white-space: nowrap;}.model_scrollx{justify-content: space-between;padding: 40rpx 0;}.scrollx_items{padding: 30rpx 20rpx;text-align: center;display: inline-block;width: 210rpx;box-sizing: border-box;margin-left: 30rpx;}.scrollx_items:last-child{margin-right: 30rpx;}.scrollx_items image{width: 70rpx;height: 66rpx;}.tgyx_title{font-size: 28rpx;color: #333333;margin-top: 30rpx;}.tgyx_desc{font-size: 24rpx;margin-top: 10rpx;}.tg_zdtg{background: linear-gradient(bottom right, #d5e4fa, #dae7fb);color: #477cd3;}.tg_hot{background: linear-gradient(bottom right, #fffcec, #fbf6d9);color: #ffa800;}.tg_zshy{background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);color: #c559de;}.tg_hjhy{background: linear-gradient(bottom right, #fff8f0, #fff0df);color: #f3791f;}</style>

uniapp实现左右滑动相关推荐

便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window，所以要另外去做监听和触控事件的传递}
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window,所以要另外去做监听和触控事件的传递} 效果![请添加图片描述](https://img-blog.csdnimg.c ...
uniapp实现可滑动顶部选项卡
uniapp实现可滑动顶部选项卡利用<scroll-view>和<swiper>实现可滑动顶部选项卡,实现效果类似下图: 这里,简单模拟一下,实现一个大致效果一.构建顶部t ...
uniapp实现左右滑动效果
uniapp实现左右滑动效果代码展示: <template><view class="container999" @click="conClick&q ...
uni-app 手指左右滑动实现翻页效果
首先给页面添加 touch 事件 <view class="text-area" @touchstart="start" @touchend=" ...
uni-app双排一起滑动--两行同步滑动
效果如下所示,就是两行列表同步滑动: 这个横向滚动肯定还是用scroll-view组件,重要的是里面item样式排列,要用到flex布局: <scroll-view class="na ...
uni-app页面上下滑动关闭(页面回弹问题)
这个问题很烦,因为上下拉的时候会出现空白页,很难看!我一开始以为是上拉/下拉刷新没关,但后面试了很多方法都没用,查看官方文档的时候很诡异,在app-plus下有一个回弹属性,将它改为false,页面就 ...
uni-app 蒙板滑动/滚动问题//双滑动
由于开发的是小说阅读器,蒙板之上需要有章节列表,如图发现在蒙版上滑动时,下方正文区域也有时候会滑动,目录滑动到底/顶部时,再滑动就是下方正文滑动了, 网上找了很久办法,都没有相应解决,调试了很久,终 ...
【2022-8-4】uniapp 禁止用户滑动除了某个盒子以外的任意元素
禁止用户滑动除了这个盒子的任意元素 <view class="text_ComHeight" @touchmove.stop.prevent="moveHandle ...
uni-app实现可滑动日历
效果: uni-calendar.vue <template><view class="uni-calendar"><view v-if=" ...

uniapp实现左右滑动

uniapp实现左右滑动相关推荐

最新文章

热门文章