仿淘宝商品列表切换

仿淘宝商品列表切换

源码:http://download.csdn.net/detail/qq_32890771/9864526

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp"
tools:context="com.example.a3_.MainActivity">

<Button
    android:id="@+id/change"
    android:text="切换布局"
    android:textSize="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<ListView
    android:id="@+id/lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</ListView>

<GridView
    android:id="@+id/gv"
    android:numColumns="2"
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</GridView>
</FrameLayout>

核心代码

package com.example.a3_;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

private ListView lv;
private GridView gv;
private Button button;
//设置默认的显示或隐藏
private boolean isLvShow = true;
private boolean isGvShow = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //初始化控件
    lv = (ListView) findViewById(R.id.lv);
    gv = (GridView) findViewById(R.id.gv);
    button = (Button) findViewById(R.id.change);

    //设置适配器
    lv.setAdapter(new MyAdapter());
    gv.setAdapter(new MyAdapter());

    //为按钮设置点击事件
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (isLvShow){
                lv.setVisibility(View.GONE);
                gv.setVisibility(View.VISIBLE);
            }else {
                lv.setVisibility(View.VISIBLE);
                gv.setVisibility(View.GONE);
            }

            //对显示或隐藏进行取反
            isLvShow = !isLvShow;
            isGvShow = !isGvShow;
        }
    });
}


class MyAdapter extends BaseAdapter{

    @Override
    public int getCount() {
        return 20;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        //为listview设置布局
        if (convertView==null){
            convertView = View.inflate(getApplicationContext(),R.layout.item,null);
        }
        return convertView;
    }
}
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下代码实现仿淘宝商品主图的切换效果: HTML 代码: ``` <div class="main-pic"> <img class="active" src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <ul class="thumb"> <li><img src="thumb1.jpg"></li> <li><img src="thumb2.jpg"></li> <li><img src="thumb3.jpg"></li> </ul> ``` CSS 代码: ``` .main-pic { position: relative; width: 500px; height: 500px; } .main-pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-out; } .main-pic .active { opacity: 1; } .thumb { margin-top: 10px; list-style: none; } .thumb li { display: inline-block; margin-right: 10px; } .thumb img { width: 100px; height: 100px; cursor: pointer; opacity: 0.5; transition: opacity 0.5s ease-out; } .thumb img:hover { opacity: 1; } .thumb .active img { opacity: 1; } ``` JS 代码: ``` const mainPic = document.querySelector('.main-pic'); const mainPicImgs = mainPic.querySelectorAll('img'); const thumb = document.querySelector('.thumb'); const thumbImgs = thumb.querySelectorAll('img'); thumbImgs.forEach((thumbImg, index) => { thumbImg.addEventListener('click', () => { mainPicImgs.forEach(mainPicImg => { mainPicImg.classList.remove('active'); }); mainPicImgs[index].classList.add('active'); thumbImgs.forEach(thumbImg => { thumbImg.parentNode.classList.remove('active'); }); thumbImg.parentNode.classList.add('active'); }); }); ``` 通过以上代码,你可以实现一个类似淘宝商品主图切换的效果。当你点击缩略图时,对应的大图会显示在主图区域,并将其对应的缩略图高亮显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值