Android 简单易用的SideBar 快速定位侧边栏A~Z 仿微信国家或地区代码选择

Android 简单易用的SideBar 快速定位侧边栏A~Z 仿微信国家或地区代码选择

前言

很多项目里都会用到快速定位侧边栏,好比如联系人列表界面、城市列表等;
所以为了方便,我就自己打包了一个控件依赖库,方便自己使用也方便别人使用;

效果

普通图片:
sidebar
GIF图:
sidebar

使用方法

Step 1. Add the JitPack repository to your build file

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency

	dependencies {
	        implementation 'com.github.D10NGYANG:DL10SideBar:1.0.0'
	}

Step 3. 在布局中使用

    <com.dlong.rep.dlsidebar.DLSideBar
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        app:dialogTextBackground="@drawable/ic_launcher_background"
        app:dialogTextBackgroundHeight="100dp"
        app:dialogTextBackgroundWidth="100dp"
        app:dialogTextColor="@color/colorAccent"
        app:dialogTextSize="25sp"
        app:sideBackground="@android:color/holo_orange_light"
        app:sideTextArray="@array/dl_side_bar_def_list"
        app:sideTextColor="@color/colorPrimaryDark"
        app:sideTextSelectColor="@color/colorAccent"
        app:sideTextSize="16sp" />

其中可以设置的参数包含以下:

    <declare-styleable name="DLSideBar">
        <attr name="sideTextArray" format="reference" /> <!--sidebar的字符列表-->
        <attr name="sideTextColor" format="color" /> <!--sidebar的字符颜色-->
        <attr name="sideTextSelectColor" format="color" /> <!--sidebar的字符选中时的颜色-->
        <attr name="sideTextSize" format="dimension" /> <!--sidebar的字符大小-->
        <attr name="sideBackground" format="reference|color" /> <!--sidebar的背景颜色-->
        <attr name="dialogTextColor" format="color" /> <!--选中弹窗字符颜色-->
        <attr name="dialogTextSize" format="dimension" /> <!--选中弹窗字符大小-->
        <attr name="dialogTextBackground" format="reference|color" /> <!--选中弹窗字符背景颜色-->
        <attr name="dialogTextBackgroundWidth" format="dimension" /> <!--选中弹窗字符背景宽度-->
        <attr name="dialogTextBackgroundHeight" format="dimension" /> <!--选中弹窗字符背景高度-->
    </declare-styleable>

Step 4. 在Activity中监听

private DLSideBar sbIndex;
sbIndex = findViewById(R.id.sb_index);
// 配置右侧index
sbIndex.setOnTouchingLetterChangedListener(mSBTouchListener);
    /**
     * 右侧index选项监听
     */
    private DLSideBar.OnTouchingLetterChangedListener mSBTouchListener = new DLSideBar.OnTouchingLetterChangedListener() {
        @Override
        public void onTouchingLetterChanged(String str) {
            // 返回的是字母A~Z
            // TODO: 2019/4/1 这里更新你的列表
        }
    };

完事。

demo

整个项目的源码在GitHub上,欢迎查看和提交意见
D10NGYANG/DL10SideBar

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 微信小程序中, 侧边和商品联动的代码可能长这样: ``` // 在侧边组件中 // 1. 声明一个自定义事件, 名称为 selectCategory // 2. 在点击侧边每一项时, 触发自定义事件, 并将当前点击的分类的id作为参数传递 onCategoryClick: function (e) { let id = e.currentTarget.dataset.id this.setData({ activeCategoryId: id }) this.triggerEvent('selectCategory', { id: id }, {}) } // 在商品列表组件中 // 1. 监听侧边的 selectCategory 自定义事件 // 2. 在事件处理函数中, 获取到当前选中的分类id, 然后请求对应的商品数据并更新商品列表 pageLifetimes: { show: function () { this.getGoodsList() } }, methods: { getGoodsList: function () { let that = this WxRequest.get({ url: '/goods/list', data: { categoryId: that.data.categoryId } }).then(res => { if (res.code === 0) { that.setData({ goodsList: res.data.goodsList }) } }) }, onSelectCategory: function (e) { let id = e.detail.id this.setData({ categoryId: id }) this.getGoodsList() } } ``` 希望这能帮到你! ### 回答2: 微信小程序的侧边和商品联动的代码可以通过监听组件的点击事件来实现。以下是一个简单的示例: 1. 在json文件中设置页面结构,包括侧边和商品的组件,例如: ```json { "usingComponents": { "sidebar": "/components/sidebar", "product-list": "/components/product-list" } } ``` 2. 在wxml文件中编写页面布局,包括侧边和商品的位置及样式。 ```html <sidebar bind:selectItem="onSidebarItemClick"></sidebar> <product-list products="{{products}}"></product-list> ``` 3. 在js文件中编写逻辑代码,包括监听侧边点击事件和更新商品数据。 ```javascript Page({ data: { products: [] }, onLoad: function() { // 从服务器获取商品数据,并更新到this.data.products中 }, onSidebarItemClick: function(event) { const selectedCategory = event.detail.category; // 获取点击的侧边分类 // 根据分类筛选商品数据,并更新到this.data.products中 this.setData({ products: filteredProducts }); } }) ``` 4. 在侧边组件的js文件中,编写点击事件的触发和传递函数。 ```javascript Component({ methods: { onItemClick: function(event) { const category = event.currentTarget.dataset.category; // 获取点击的分类 this.triggerEvent('selectItem', { category: category }); } } }) ``` 这样,当侧边中的某个分类被点击时,就会触发selectItem事件,在页面的onSidebarItemClick方法中处理该事件,根据选择的分类筛选商品数据并更新到商品中。 ### 回答3: 微信小程序侧边商品联动代码的实现主要是通过使用wxml、wxss和js文件,并结合微信小程序提供的API来实现的。 首先,需要在wxml文件中创建一个侧边和商品的布局。可以使用<view>标签来创建侧边,并使用<scroll-view>标签来创建商品。可以给<scroll-view>标签添加一个id属性,方便在js文件中获取该元素。然后,分别为侧边和商品中的每个商品项添加一个点击事件,用来触发联动效果。 接下来,在js文件中,可以通过选择器获取侧边和商品的元素。可以使用wx.createSelectorQuery()方法来获取指定元素的信息。获取到元素后,可以使用setData()方法将数据传递给wxml文件,从而更新显示的内容。 在点击侧边的商品项时,可以触发相应的点击事件。点击事件中,可以根据点击的商品项的索引,来滚动到对应商品中的商品项位置。可以使用wx.pageScrollTo()方法来实现滚动,传入滚动到的位置的偏移量即可。 此外,还可以在点击侧边的商品项时,将点击的商品项的索引传递给商品,用来控制商品中对应项的样式变化。可以使用wx:if或wx:show来控制相应商品项的显示与隐藏,并给对应的商品项添加不同的样式。 通过以上的代码实现,可以实现微信小程序侧边和商品的联动效果。用户在侧边选择不同的商品项时,商品会相应地滚动到对应的位置,并且高亮显示当前选中的商品项。这样可以提升用户体验,使得用户能够快速地浏览和选择商品。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值