1使用内置组件scroll-view
2实现点击时出现的背景样式
3使用scroll-into-view,实现点击时自动滚动
前言
本次主要内容是介绍页面tab的开发,如何实现tab与页面内容联动呢?关注我就知道!
本次效果展示
一、如何实现页面tab
1使用内置组件scroll-view
如下图所示,我们需要使用到红色框框中的属性,此属性可也实现滚动
这里有一个大坑,不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列(这里我们只关注scroll-x、scroll-y)
<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"
:class="currentIndex==index'active':''" @click="changeTab(index)">
{{item}}
</view>
</scroll-view>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
<view v-for="(item,index) in 100 " :key='index'>
{{item}}
</view>
</scroll-view>
我们只能通过样式来改变它,让它横过来
scroll-view-t view {
display: inline-block;
font-size: 32rpx !important;
margin: 0 15rpx;
}
scroll-view-t {
white-space: nowrap;
height: 88rpx;
line-height: 88rpx;
}
2实现点击时出现的背景样式
这里我们需要定义一个默认的索引currentIndex,在通过点击事件所传出去的索引进行判断,从而获得当前所点击的对象给到样式,样式我们就用三元表达式判断赋予样式,如下点击方法
changeTab(index) { //nabbar栏点击切换
// if (thiscurrentIndex === index) return
thiscurrentIndex = index
// thisscrollinto = 'tab' + index
// if (thiscurrentIndex < 10) {
// thisscrollinto = 'tab0'
// }
},
如下是绑定的点击事件和三元表达式判断赋予样式,其中背景样式提前写好了
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"
:class="currentIndex==index'active':''" @click="changeTab(index)">
{{item}}
</view>
不过现在只实现了通过点击样式发生改变,感觉实现了tab切换,眼下要解决点击时tab这个导航条也要自己滚动起来,不能一边手动滚动,然后再点击吧
3使用scroll-into-view,实现点击时自动滚动
使用它的目的主要是,在点解tab时可以实现,你向那个方向点,他就往那个方向滚动,不过在点回去的时候,就有坑了,需要对其作出判断
阅读文档很难理解对吧,我在这里说说我的理解,这里是想要我们通过在scroll-view中属性scroll-into-view绑定一个元素,此元素还要获得id,此id还不能已数字开头,此id就是移动的关键,需要绑定,所遍历内容的索引,从而实现往哪里滚动,不过想点回去就需要进行判断
如下代码中在scroll-view,使用scroll-into-view绑定了一个自己定义的空元素scrollinto
在v-for遍历后获得了索引,id就通过索引进行了绑定,拼接了以tab开头
<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"
:class="currentIndex==index'active':''" @click="changeTab(index)">
{{item}}
</view>
</scroll-view>
实现点击滚动很简单,要滚动回去就要判断了,如下代码,只要当前的thisscrollinto = 'tab' + index就能实现点击就滚动,回去是就要判断当前点击的缩影,手动赋值,给一个最好的区间,这样效果更好
changeTab(index) { //nabbar栏点击切换
if (thiscurrentIndex === index) return
thiscurrentIndex = index
thisscrollinto = 'tab' + index
if (thiscurrentIndex < 10) {
thisscrollinto = 'tab0'
}
},
view组件的高度不包含margin
设置了box-sizing: border-box;view的大小宽高200,则200包含padding和边框
如果不设置box-sizing: border-box;,view的宽高等于 200 +2padding+2border
<!--pages/search/searchwxml-->
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
input-align="center"
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
background="#4fc08d"
/>
<ListItem itemList="{{itemList}}" />
<view wx:if="{{kong}}" style="padding: 20px;text-align: center;">无更多数据</view>
<van-toast id="van-toast" />
{
"usingComponents": {
"van-search": "@vant/weapp/search/index",
"ListItem":"/components/ListItem/ListItem",
"van-toast": "@vant/weapp/toast/index"
},
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": true,
"onReachBottomDistance": 0
}
const { goods>
微信小程序直播消息滑动,1打开微信,点击发现,找到小程序点击,进入小程序以后,在搜索框内输入手持d幕。
2进入小程序之后可以看到字幕的样式,选择中间滚动的字幕样式
3对边点击一处找到输入框,在输入框内输入你想显示的内容,点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等,然后保存到手机中就可以了。
微信小程序 ,列表头滚动的过程中 ,view 悬浮在顶部 ,如何实现这样的一个效果呢??
//indexjs
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/
页面加载完成
/
onReady: function () {
},
/
页面滚动监听
/
onPageScroll: function (e) {
//consolelog(e)
let that = this
let query = wxcreateSelectorQuery()
queryselectAll("section-cell")boundingClientRect(function (res) {
consolelog(res)
let size =reslength;
let position = -1;
let topshow = -1000;//根据需求设置大小
let i=0;
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标, 负数最大值 或者是0,
for(i=0;i<size;i++){0
let top = res[i]top;
if(top<=0 && top>topshow ){
topshow = top;
position=i;
}
}
consolelog("当前坐标是 position = "+position)
let isshow =false;
if (res[0]top<0){
if(position==-1) position=0;
isshow = true;
}
thatsetData({
isshow: isshow,
toptexxt: isshowthatdatatestData[position]:""
})
})exec()
},
})
<!--indexwxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/indexwxss/
section-placeholder {
background-color: white;
}
section-fixed {
position: fixed;
top: 0;
}
header {
height: 300rpx;
width: 750rpx;
background-color: bisque;
}
section-header {
height: 80rpx;
width: 750rpx;
background-color: rebeccapurple;
}
section-cell {
width: 750rpx;
height:80rpx;
background-color: gold;
margin-top: 2rpx;
}
section-cell2 {
height: 50rpx;
width: 750rpx;
background-color: darkred;
}
效果
先前看到网上不少大神写的demo,其菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字)。而笔者现在写的项目菜单栏为汉字,所以需要改变数据格式,进而需要改变 wxml 中的循环嵌套和获取。以下为成型后效果,希望对读者有帮助。
实现该功能的思路:通过点击左侧滑栏的某一项,获取到该元素携带的 id ,然后动态传给右侧滑栏的 scroll-into-view ,从而实现右侧滑栏对应的该元素运动置顶。
以下为完整数据
数据格式:
/ pages/listers/listerswxss /
/ pages/list-1/list-1wxss /
/ 总体主盒子 /
container {
position: relative;
width: 100%;
height: 1220rpx;
background-color: #f0f4f7;
color: #939393;
}
/ 左侧栏主盒子 /
nav_left{
/ 设置行内块级元素(没使用定位) /
display: inline-block;
width: 100%;
height: 100%;
/ 主盒子设置背景色为灰色 /
background: #fff;
text-align: center;
/ position: fixed; /
left: 0;
top: 0;
border-top: 1rpx solid #dedede;
}
/ 左侧栏list的item /
nav_left nav_left_items{
background: #fff;
/ 每个高30px /
height: 80rpx;
/ 垂直居中 /
line-height: 80rpx;
/ 再设上下padding增加高度,总高42px /
padding: 15rpx 0;
/ 只设下边线 /
border-bottom: 1px solid #dedede;
/ 文字14px /
font-size: 29rpx;
color: #101010;
font-weight:
}
/ 左侧栏list的item被选中时 /
nav_left nav_left_itemsactive{
/ 背景色变成白色/
background: #f0f4f7;
color: #ed1000;
}
/ 右侧栏主盒子 /
scroll_right{
/ 右侧盒子使用了绝对定位 /
position: fixed;
top: 0;
right: 0;
overflow: auto;
flex: 1;
/ 宽度75%,高度占满,并使用百分比布局 /
width: 75%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
background-color: #f0f4f7;
border-top: 1rpx solid #dedede;
}
mink::after{
display:block;content:'';clear:both;
}
jiul,jiul image{
width: 100%;
height: 170rpx;
}
minl{
font-size: 29rpx;
color: #777;
text-align: left;
line-height: 60rpx;
float: left;
background: #f0f4f7;
width: 100%;
/ height: 50rpx; /
}
mink{
width: 100%;
background: #fff;
height: 100%;
}
/ 右侧栏list的item /
nav_right_items{
/ 浮动向左 /
float: left;
/ 每个item设置宽度是3333% /
width: 50%;
/ height: 160rpx; /
text-align: center;
color: #4a4a4a;
background: #fff;
}
nav_right_items image{
/ 被设置宽高 /
width: 60px;
height: 50px;
margin-top: 15rpx;
}
nav_right_items text{
/ 给text设成块级元素 /
display: block;
margin-top: 5rpx;
margin-bottom: 10rpx;
font-size: 26rpx;
/ 设置文字溢出部分为 /
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/ 自定义其他点击态样式类 /
other-navigator-hover{
background:#fff;
}
scroll_left{
width:25%;
height:100%;
background:#fff;
text-align:center;
position: fixed;
left: 0;top: 0
}
自定义导航栏分两种,一种是单独某个页面做一个自定义导航;一种是所有页面的导航栏都是自定义样式
如果是所有页面的导航栏都要自定义,在appjson里找到window样式
"navigationStyle":"custom"
所有页面的就需要先自定义组件了,这里先不做详说,因为我目前项目中只是首页需要自定义导航栏,这里我先详说这个
这样当前页面自带的导航栏就没有了,然后需要你在wxml页面中就可以开始写样式了
<!-- 自定义导航栏 -->
<view class="navStyle" style="height:{{navHeight}}px">
<view class="navFix" style="height:{{navHeight}}px;margin-top:{{imgTop}}px;">
<image src=""></image>
<view style="margin-top:{{cityTop}}px;">
全国
{{cityName}}
</view>
</view>
</view>
// 获取状态栏高度
const { statusBarHeight } = wxgetSystemInfoSync();
// 得到右上角菜单的位置尺寸
const menuButtonObject = wxgetMenuButtonBoundingClientRect();
consolelog('右上角菜单的尺寸:',menuButtonObject);
const { top, height } = menuButtonObject;
// 计算导航栏的高度
// 此高度基于右上角菜单在导航栏位置垂直居中计算得到
const navBarHeight = height + (top - statusBarHeight) 2;
// 计算状态栏与导航栏的总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;
thissetData({
navHeight:statusNavBarHeight,
imgTop:statusNavBarHeight-45,
cityTop:statusNavBarHeight-45-25
})
您好,微信小程序购物个人主页代码的设置,需要按照以下步骤进行:
1 首先,在小程序的开发工具中,打开个人主页的页面代码文件。
2 在“mywxml”文件中,可以设置个人主页的布局和内容。可以使用微信小程序提供的组件,来设计个人主页的界面。
3 在“mywxss”文件中,可以设置个人主页的样式。可以通过设置样式规则,来调整组件的颜色、大小、字体等属性,以达到自己想要的效果。
4 在“myjs”文件中,可以编写个人主页的逻辑代码。可以通过调用微信小程序提供的API,来实现一些功能,如获取用户信息、展示订单列表等。
5 最后,在“myjson”文件中,可以设置个人主页的一些配置信息,如页面标题、导航栏颜色等。
以上就是微信小程序购物个人主页代码的设置步骤,需要结合具体的需求和实际情况进行设计和调整。
以上就是关于小程序tab选项卡切换样式全部的内容,包括:小程序tab选项卡切换样式、微信小程序box-sizing、小程序简单的搜索栏等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)