微信小程序首页轮播图 x轴横向滚动视图

页面

<!--index.wxml-->
<view class="page"><view class="title">首页 </view><view class="search"><input type="text" placeholder="输入你想了解的内容" /></view><!-- 轮播图 --><view class="swiper"><swiper indicator-dots="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ffca28"indicator-color="#FFFFFF"><block wx:for="{{swiper}}"><swiper-item class="swiper-item"><image src="{{item.pic}}"></image></swiper-item></block></swiper></view><!-- 改善部位 --><view class="list loc"><view class="til">改善部位</view><view class="con"><scroll-view class="scroll" scroll-x="true" enhanced="true" show-scrollbar="true"><view class="loc-item item" ><view class="locimg"><image src="/common/img/u381.png" class="img"></image></view><view class="loc-title">全身</view></view><view class="loc-item item"  ><view class="locimg"><image src="/common/img/u382.png" class="img"></image></view><view class="loc-title">腿部</view></view><view class="loc-item item" ><view class="locimg"><image src="/common/img/u383.png" class="img"></image></view><view class="loc-title">臀部</view></view><view class="loc-item item"><view class="locimg"><image src="/common/img/u383.png" class="img"></image></view><view class="loc-title">腹部</view></view></scroll-view></view></view><!-- 热门课程 --><view class="list"><view class="til">热门课程</view><view class="con"><scroll-view class="scroll" scroll-x="true" enhanced="true" show-scrollbar="true"><block wx:for="{{course}}"><view class="item hot" bindtap="info" data-id="{{item.id}}"><image src="{{item.pic}}" class="img"></image><text class="time">{{item.len_time}}</text><text class="name">{{item.name}}</text></view></block></scroll-view></view></view>
</view>

样式

/**index.wxss**/
.page{width: 90%;margin: 0 auto;
}
.title{font-weight: bold;font-size: 24px;
}
.search{height: 45px;line-height: 45px;margin: 20px 0;border: 1px solid #ccc;border-radius: 10px;background-color: #F6F6F6;
}
.search input{width: 100%;height: 100%;padding-left: 15px;
}
.swiper-item{width: 100%;height: 300px;border-radius: 20px;
}
.swiper-item image{width: 100%;height: 100%
}
.list{margin-top: 20rpx;
}
.con{height: 300rpx;display: flex;justify-content: start;
}
.scroll{white-space: nowrap;
}
.item{margin: 25rpx 20rpx;border-radius: 20rpx;display: inline-block;
}
.loc-item{width: 180rpx;height: 250rpx;
}
.locimg{width:180rpx;height: 180rpx;border-radius: 15px;
}
.img{width: 100%;height: 100%;border-radius: 15rpx;
}
.loc-title{line-height: 30px;text-align: center;
}
.hot{width: 500rpx;height: 250rpx;
}
.time{position: relative;top: -200rpx;left: -480rpx;font-size: 12px;color: white;padding: 0 5rpx;border-radius: 10rpx;background-color: #ee3237;
}
.name {position: relative;left: -580rpx;top: -20rpx;color: white;font-size: 14px;
}

效果图

// index.js
// 获取应用实例
const app = getApp()Page({data: {swiper:['/common/img/u400.png','/common/img/u401.png'],course:{},},onLoad() {this.swiper();this.course();},swiper(){wx.request({url: 'http://www.tp6.com/lx/course/swiper',dataType:'json',success:({data})=>{console.log(data);if(data.code == 200){this.setData({swiper:data.data});} }})},course(){wx.request({url: 'http://www.tp6.com/lx/course/index',dataType:'json',success:({data})=>{console.log(data);if(data.code == 200){this.setData({course:data.data});} }})},info(evt){console.log(evt);let id = evt.currentTarget.dataset.id;wx.navigateTo({url: '/pages/courseinfo/courseinfo?id='+id,})},
})

微信小程序首页轮播图 x轴横向滚动视图相关推荐

微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...
微信小程序3D轮播图实现
好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于 ...
微信小程序之轮播图swiper组件自定义指示点样式
微信小程序 - swiper组件定义一个轮播图 swiper 组件: // swiper.wxml <swiper indicator-dots="true">< ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

微信小程序首页轮播图 x轴横向滚动视图

微信小程序首页轮播图 x轴横向滚动视图相关推荐

最新文章

热门文章

微信小程序 首页轮播图 x轴 横向滚动视图

微信小程序 首页轮播图 x轴 横向滚动视图相关推荐

最新文章

热门文章

微信小程序首页轮播图 x轴横向滚动视图

微信小程序首页轮播图 x轴横向滚动视图相关推荐