微信小程序底部选项卡开发实例

　　微信小程序的开发包括顶部导航栏和底部选项卡，关于小程序顶部导航栏的相关资料小编以前介绍过了，所以今天要讲一讲微信小程序底部选项卡的开发实例。

　　在网上看了比较多的关于小程序Tab的教程，发现都很杂乱。比较多的用法是用TitlePagerTabStrip和ViewPaper。不过TitlePagerTabStrip有个很大的缺陷，Tab里面的内容刚进去是没有的，要滑一次才能加载出来。而且滑动的时候，Tab里面的内容位置不是固定的，滑倒最后会出现一片空白，非常不美观。虽然有其他的补救方法，但是非常的麻烦，所以我就按照自己的方法实现了一个。功能不错而且非常简单。

　　直接点击或者是滑动界面，都可以转到相应的小程序页面。

　　效果图：

　　原理是用了三个按钮和ViewPaper，抛弃了TitlePagerTabStrip。

　　ViewPaper通俗的说，它是一个装页面的容器。如上图我有三个不同的界面，是因为我把三个view加了进去。然后再把这个viewPaper加到主界面的布局中。

　　这样，主界面上就有三个按钮，按钮下方是一个viewPaper，这个viewPaper里面有三个view，我每滑一下或点击按钮就会跳到相应的view。

　　就是说我们看到的，其实都是主界面，按钮是一直在那的。我们只是不断的转换viewPaper这个容器里面的视图而已。

　　主界面的布局代码：

　　xmlns:tools="schemas.android/tools"

　　android:layout_width="match_parent"

　　android:layout_height="match_parent"

　　tools:context=".MainActivity" >　　//这里加三个按钮

　　//这里是viewPaper 一个容器

　　android:id="@+id/viewpager"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content" >

　　怎么实现，按相应的按钮跳转到viewPaper中相应的视图呢?很简单，只要为按钮设置监听，然后调用viewPaper的setCurrentItem()这个函数就行。

　　对于相应的页面，我们的按钮也应该有相应的变化，如上图我们的按钮中的英文变成了√。这个只要在viewPaper的监听器中重载onPageSelected()这个函数就行，

　　每个页面被选中，都会调用这个函数。在这个函数里判断当前的页面是哪一个，然后再对按钮做出相应的改变即可。

　　onCreate的代码

　　//设置viewPaper

　　ViewPager pager = null;

　　ArrayList viewContainter = new ArrayList();

　　@Override

　　protected void onCreate(Bundle savedInstanceState) {

　　super.onCreate(savedInstanceState);

　　setContentView(R.layout.activity_add);

　　//实例化ViewPaper

　　pager = (ViewPager) this.findViewById(R.id.viewpager3);

　　//设置按钮跳转到相应的viewPaper页面

　　按钮1.setOnClickListener(new View.OnClickListener() {

　　@Override

　　public void onClick(View v) {

　　//跳到第一个页面

　　pager.setCurrentItem(0);

　　}

　　});

　　按钮2.setOnClickListener(new View.OnClickListener() {

　　@Override

　　public void onClick(View v) {

　　//第二个页面

　　pager.setCurrentItem(1);

　　}

　　});

　　按钮3.setOnClickListener(new View.OnClickListener() {

　　@Override

　　public void onClick(View v) {

　　//第三个页面

　　pager.setCurrentItem(2);

　　}

　　});

　　//为viewPaper设置内容

　　//view是我们放进viewPaper里面的东西，要为它设置好布局，再放进去

　　View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null);

　　View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null);

　　View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null);

　　//这是个ArrayList,加进去了3个view

　　viewContainter.add(view1);

　　viewContainter.add(view2);

　　viewContainter.add(view3);

　　//设置适配器 这里的代码复制即可

　　pager.setAdapter(new PagerAdapter() {

　　//viewpager中的组件数量

　　@Override

　　public int getCount() {

　　return viewContainter.size();

　　}

　　//滑动切换的时候销毁当前的组件

　　@Override

　　public void destroyItem(ViewGroup container, int position,

　　Object object) {

　　((ViewPager) container).removeView(viewContainter.get(position));

　　}

　　//每次滑动的时候生成的组件

　　@Override

　　public Object instantiateItem(ViewGroup container, int position) {

　　((ViewPager) container).addView(viewContainter.get(position));

　　return viewContainter.get(position);

　　}

　　@Override

　　public boolean isViewFromObject(View arg0, Object arg1) {

　　return arg0 == arg1;

　　}

　　@Override

　　public int getItemPosition(Object object) {

　　return super.getItemPosition(object);

　　}

　　});

　　//页面变化时的监听 改变按钮

　　pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

　　@Override

　　public void onPageScrolled(int i, float v, int i1) {

　　}

　　@Override

　　public void onPageSelected(int i) {

　　switch (i) {

　　//如果是第一个页面

　　case 0:

　　按钮1.setText("√");

　　按钮2.setText("TAB2");

　　按钮3.setText("TAB3");

　　break;

　　//如果是第二个页面

　　case 1:

　　按钮1.setText("TAB1");

　　按钮2.setText("√");

　　按钮3.setText("TAB3");

　　break;

　　//如果是第三个页面

　　case 1:

　　按钮1.setText("TAB1");

　　按钮2.setText("TAB2");

　　按钮3.setText("√");

　　break;

　　}

　　}

　　@Override

　　public void onPageScrollStateChanged(int i) {

　　}

　　});

　　}

　　以上就是微信小程序底部选项卡的开发实例和相关代码了，怎么样，是不是很简单呢?希望大家都能参照教程开发成功，更多相关资料请关注微信小程序素材网。

　　小程序怎么设置不同页面的导航?小程序如何设置底部导航?

　　微信小程序底部导航栏怎么开发

　　微信小程序怎么设置外底部导航按钮?