直播微信小程序是啥_微信小程序滚动Tab完成左右可滑动切换

  • 栏目:公司新闻 时间:2021-01-11 15:11 分享新闻到:
<返回列表

微信小程序滚动Tab实现左右可滑动切换     投稿:lqh   这篇文章主要介绍了微信小程序滚动Tab实现左右可滑动切换的相关资料,这里提供实现实例帮助大家实现这样的功能,需要的朋友可以参考下

效果:

最终效果如上。问题:

1、tab标题总共8个,所以一屏无法全部显示。
2、tab内容区左右滑动切换时,tab标题随即做标记(active)。
3、当active的标题不在当前屏显示时,要使其能显示到当前屏中。

一、wxml结构

tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动。

tab内容可左右滑动切换,使用swiper组件实现

为了偷懒,所以数据都通过wx:for遍历重复出来。

说明:

1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页

 view 
 scroll-view scroll-x="true" scroll-left="{{scrollLeft}}" 
 view class="tab-item {{currentTab==0 'active':''}}" data-current="0" bindtap="swichNav" 健康 /view 
 view class="tab-item {{currentTab==1 'active':''}}" data-current="1" bindtap="swichNav" 情感 /view 
 view class="tab-item {{currentTab==2 'active':''}}" data-current="2" bindtap="swichNav" 职场 /view 
 view class="tab-item {{currentTab==3 'active':''}}" data-current="3" bindtap="swichNav" 育儿 /view 
 view class="tab-item {{currentTab==4 'active':''}}" data-current="4" bindtap="swichNav" 纠纷 /view 
 view class="tab-item {{currentTab==5 'active':''}}" data-current="5" bindtap="swichNav" 青葱 /view 
 view class="tab-item {{currentTab==6 'active':''}}" data-current="6" bindtap="swichNav" 全部 /view 
 view class="tab-item {{currentTab==7 'active':''}}" data-current="7" bindtap="swichNav" 其他 /view 
 /scroll-view 
 swiper current="{{currentTab}}" duration="300" bindchange="switchTab"
 swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}" 
 scroll-view scroll-y="true" 
 block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this" 
 view 
 view 
 image src="avatar.png" /image 
 /view 
 view 
 view 欢颜 /view 
 view 知名情感博主 /view 
 view 134个回答,2234人听过 /view 
 /view 
 navigator url="/pages/askExpert/expertDetail" 问TA /navigator 
 /view 
 /block 
 /scroll-view 
 /swiper-item 
 /swiper 
 /view 

二、js部分

微信小程序在开发起来,个人感觉挺像vue的,以数据驱动视图的更新。所以在小程序中,不能直接操作dom,当然也不能使用jquery之类的库。

var app = getApp();
Page({
 data:{
 winHeight:"",//窗口高度
 currentTab:0, //预设当前项的值
 scrollLeft:0, //tab标题的滚动条位置
 expertList:[{ //假数据
 img:"avatar.png",
 name:"欢顔",
 tag:"知名情感博主",
 answer:134,
 listen:2234
 // 滚动切换标签样式
 switchTab:function(e){
 this.setData({
 currentTab:e.detail.current
 this.checkCor();
 // 点击标题切换当前页时改变样式
 swichNav:function(e){
 var cur=e.target.dataset.current;
 if(this.data.currentTaB==cur){return false;}
 else{
 this.setData({
 currentTab:cur
 //判断当前滚动超过一屏时,设置tab标题滚动条。
 checkCor:function(){
 if (this.data.currentTab 4){
 this.setData({
 scrollLeft:300
 }else{
 this.setData({
 scrollLeft:0
 onLoad: function() { 
 var that = this; 
 // 高度自适应
 wx.getSystemInfo( { 
 success: function( res ) { 
 var clientHeight=res.windowHeight,
 clientWidth=res.windowWidth,
 rpxR=750/clientWidth;
 var calc=clientHeight*rpxR-180;
 console.log(calc)
 that.setData( { 
 winHeight: calc 
 }); 
 footerTap:app.footerTap

三、wxss样式

.tab-h{
 height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助大家,谢谢大家对本站的支持!


分享新闻到:

更多阅读

直播微信小程序是啥_微信小程序滚动Ta

公司新闻 2021-01-11
手机微信微信小程序翻转Tab完成上下可拖动转换 文章投稿:lqh 本文关键详细介绍了手机...
查看全文

广州凡科互联网科技股份有限公司招聘联

公司新闻 2021-01-11
招聘人数:21职位信息岗位名称:联通10010客服客服,岗位:在线客服,热线客服,回访客服,...
查看全文

广州凡科互联网科技股份有限公司招聘电

公司新闻 2021-01-11
招聘人数:18职位信息 电信回访客服 (朝九晚六 学历不限 无需经验) 一、【岗位职...
查看全文
返回全部新闻


区域站点: 南丰县如何建立微信小程序   南宫市自己搭建服务器   囊谦县建立网站   南和县自助建站免费建站平台   南华县如何建立微信小程序   南江县自己搭建服务器   南京市建立网站   南靖县自助建站免费建站平台   南康市如何建立微信小程序   南乐县自己搭建服务器   南陵县建立网站   南宁市自助建站免费建站平台   南平市如何建立微信小程序   南皮县自己搭建服务器   南市区建立网站   南通市自助建站免费建站平台   南投县如何建立微信小程序   南雄市自己搭建服务器   南溪县建立网站   南阳市自助建站免费建站平台   南漳县如何建立微信小程序   南召县自己搭建服务器   南郑县建立网站   那坡县自助建站免费建站平台   那曲县如何建立微信小程序   纳雍县自己搭建服务器   讷河市建立网站   内黄县自助建站免费建站平台   内江市如何建立微信小程序   内丘县自己搭建服务器   内乡县建立网站   嫩江市自助建站免费建站平台   聂荣县如何建立微信小程序   尼玛县自己搭建服务器   尼木县建立网站   宁安市自助建站免费建站平台   宁波市如何建立微信小程序   宁城县自己搭建服务器   宁德市建立网站   宁都县自助建站免费建站平台   宁国市如何建立微信小程序   宁海县自己搭建服务器   宁化县建立网站   宁晋县自助建站免费建站平台   宁陵县如何建立微信小程序   宁明县自己搭建服务器   宁南县建立网站   宁强县自助建站免费建站平台   宁陕县如何建立微信小程序   宁武县自己搭建服务器   宁乡市建立网站   宁阳县自助建站免费建站平台   宁远县如何建立微信小程序   农安县自己搭建服务器   磐安县建立网站   盘锦市自助建站免费建站平台   盘山县如何建立微信小程序   磐石市自己搭建服务器   盘州市建立网站   蓬安县自助建站免费建站平台   澎湖县如何建立微信小程序   蓬莱市自己搭建服务器   彭山县建立网站   蓬溪县自助建站免费建站平台   彭阳县如何建立微信小程序   彭泽县自己搭建服务器   彭州市建立网站   偏关县自助建站免费建站平台   平安县如何建立微信小程序   平昌县自己搭建服务器   平定县建立网站   屏东县自助建站免费建站平台   平度市如何建立微信小程序   平果县自己搭建服务器   平和县建立网站   平湖市自助建站免费建站平台   平江县如何建立微信小程序   平乐县自己搭建服务器   平凉市建立网站   平利县自助建站免费建站平台   平罗县如何建立微信小程序   平陆县自己搭建服务器   屏南县建立网站   平泉市自助建站免费建站平台   屏山县如何建立微信小程序   平顺县自己搭建服务器   平塘县建立网站   平潭县自助建站免费建站平台   平武县如何建立微信小程序   萍乡市自己搭建服务器   平乡县建立网站   平阳县自助建站免费建站平台   平遥县如何建立微信小程序   平阴县自己搭建服务器   平邑县建立网站   平远县自助建站免费建站平台   平舆县如何建立微信小程序   皮山县自己搭建服务器   普安县建立网站   浦北县自助建站免费建站平台   浦城县如何建立微信小程序   普洱市自己搭建服务器   普格县建立网站   浦江县自助建站免费建站平台   普兰县如何建立微信小程序   普宁市自己搭建服务器   莆田市建立网站   迁安市自助建站免费建站平台   乾安县如何建立微信小程序   潜江市自己搭建服务器   潜山市建立网站  

友情链接: 自助免费建站 快速建站 360免费建站永久免 自助建站 手机版

Copyright © 2002-2020 建立网站_自助建站免费建站平台_如何建立微信小程序_自己搭建服务器_网站建设空间 版权所有 (网站地图) 备案号:粤ICP备10235580号