RecyclerView 实现横向滚动效果
我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件RecyclerView。RecyclerView是listview之后的又一利器,它可以实现高度的定制。今天就利用RecyclerView实现我们需要的相册效果。
先上一个图:
主要实现就是一个RecyclerView+RecyclerView.Adapter实现。
Activity的布局文件:
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:scrollbars="none" />
我这里是自定义的控件,主要代码:
public class SimpleLinearLayout extends LinearLayout { protected Context mContext; protected View contentView; protected AtomicBoolean isPreparingData; public SimpleLinearLayout(Context context) { super(context); this.mContext = context; isPreparingData = new AtomicBoolean(false); initViews(); } public SimpleLinearLayout(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; isPreparingData = new AtomicBoolean(false); initViews(); } protected void initViews() { } }
主页面代码:
public class SpeedHourView extends SimpleLinearLayout { @BindView(R.id.recycler_view) RecyclerView recyclerView; private SpeedHourAdapter speedHourAdapter=null; private SpeedHourEntity entity=null; public SpeedHourView(Context context) { this(context, null); } public SpeedHourView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void initViews() { contentView = inflate(mContext, R.layout.layout_speed_per_hour, this); ButterKnife.bind(this); init(); } private void init() { initData(); initView(); initAdapter(); } private void initData() { String data = FileUtils.readAssert(mContext, "speenhour.txt"); entity = JsonUtils.parseJson(data, SpeedHourEntity.class); } private void initView() { LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mContext); linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); recyclerView.setLayoutManager(linearLayoutManager); } private void initAdapter() { speedHourAdapter=new SpeedHourAdapter(mContext); recyclerView.setAdapter(speedHourAdapter); if (entity!=null&&entity.topic!=null&&entity.topic.items!=null&&entity.topic.items.size()>0){ List<SpeedHourEntity.TopicBean.ItemsBean.ListBean> listBeen=entity.topic.items.get(0).list; if (listBeen!=null&&listBeen.size()>0) speedHourAdapter.setList(listBeen); } speedHourAdapter.setOnItemClickListener(new SpeedHourAdapter.OnItemClickListener() { @Override public void onItemClick(View view, int position) { ProductDetailsActivity.open(mContext); } }); } @OnClick(R.id.more_view) public void moreClick() { ToastUtils.showToast("更多时速达"); } }
adapter布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ptr="http://schemas.android.com/apk/res-auto" android:id="@+id/speed_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:padding="10dp" android:gravity="center"> <ImageView android:id="@+id/speed_image" android:layout_width="85dp" android:layout_height="85dp" android:scaleType="fitXY" /> <TextView android:id="@+id/speed_name" style="@style/style_c6_s14" android:layout_marginTop="5dp" android:text="蜂蜜柚子茶" android:maxLines="1"/> <TextView android:id="@+id/speed_price" style="@style/style_c8_s14" android:layout_marginTop="5dp" android:text="¥30.0" android:maxLength="6" android:maxLines="1"/> </LinearLayout>
adapter代码:
public class SpeedHourAdapter extends RecyclerView.Adapter<SpeedHourHolder> { private List<ListBean> specailList; private LayoutInflater mInflater; private Context mContext=null; public SpeedHourAdapter(Context context) { this.mContext=context; mInflater = LayoutInflater.from(context); } public void setList(List<ListBean> list) { this.specailList = list; notifyDataSetChanged(); } public OnItemClickListener mOnItemClickListener; public interface OnItemClickListener { void onItemClick(View view, int position); } public void setOnItemClickListener(OnItemClickListener mOnItemClickLitener) { this.mOnItemClickListener = mOnItemClickLitener; } @Override public SpeedHourHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = mInflater.inflate(R.layout.item_speedhour_layout, parent, false); SpeedHourHolder holder = new SpeedHourHolder(view); return holder; } @Override public void onBindViewHolder(final SpeedHourHolder holder, final int position) { ListBean bean = specailList.get(position); if (bean != null) { holder.speedImage.setScaleType(ImageView.ScaleType.FIT_XY); Glide.with(mContext).load(bean.pic).error(R.drawable.welfare_default_icon).into(holder.speedImage); holder.speedName.setText("同仁堂枸杞茶"); holder.speedPrice.setText("¥"+Math.random()*100); } holder.speedView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mOnItemClickListener!=null){ mOnItemClickListener.onItemClick(holder.speedView,position); } } }); } @Override public int getItemCount() { return specailList.size(); } } class SpeedHourHolder extends RecyclerView.ViewHolder { @BindView(R.id.speed_view) LinearLayout speedView; @BindView(R.id.speed_image) ImageView speedImage; @BindView(R.id.speed_name) TextView speedName; @BindView(R.id.speed_price) TextView speedPrice; public SpeedHourHolder(View itemView) { super(itemView); ButterKnife.bind(this,itemView); itemView.setTag(this); } }
代码中用到的实体类:
public class SpeedHourEntity { public TopicBean topic; public static class TopicBean { public long nextupdatetime; public List<ItemsBean> items; public static class ItemsBean { public int id; public String theme; public int products; public int users; public String href; public boolean follow; public int topictype; public List<ListBean> list; public static class ListBean { public String id; public int price; public String pic; } } } }
用到的 Json工具类也给大家
public class JsonUtils { private static Gson gson = new Gson(); public static <T> T parseJson(String response, Class<T> clazz) { try { return gson.fromJson(response, clazz); } catch (Exception e) { e.printStackTrace(); return null; } } public static <T> T parseJson(String response, Type type) { try { return gson.fromJson(response, type); } catch (Exception e) { e.printStackTrace(); return null; } } public static String toJson(Object object) { try { return gson.toJson(object); } catch (Exception e) { e.printStackTrace(); return null; } } public static <T> List<T> jsonToList(final String jsonString, final Type type) { try { return gson.fromJson(jsonString, type); } catch (Exception e) { return null; } } public static <T> List<T> jsonToList(final JsonArray jsonArray, final Class<T> classOfT) { List<T> list = new ArrayList<T>(); for (int i = 0, size = jsonArray.size(); i < size; i++) { list.add(gson.fromJson(jsonArray.get(i), classOfT)); } return list; } public static <T> T parseJson(final JsonObject jsonObject, final Class<T> classOfT) { try { return gson.fromJson(jsonObject, classOfT); } catch (Exception e) { return null; } } public static Map toMap(Object jsonString) { if (TextUtils.isEmpty(jsonString.toString())) { return new HashMap(); } String js = jsonString.toString(); Gson gson = new Gson(); Type type = new TypeToken<Map>(){ }.getType(); Map map = gson.fromJson(js,type); return map; } }
为了方便测试,给大家提供一段数据,大家放在assert就好了,然后读到实体类就好了:
{ topic: { nextupdatetime: 1472699607850, items: [ { id: 1000010, theme: "追韩剧不能少“美眸”心机", products: 793, users: 325, href: "", list: [ { id: "50119e86-8d67-4919-a41f-be8202b62b7e", price: 288, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/D4/59/CgvUBVeW2oOAJZOgAAChvNt-3Yc332_n_w_l.jpg" }, { id: "936f2615-10bb-4831-8674-9bea0b43b486", price: 79, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/79/BE/CgvUA1eMo0iAL9yhAAOEN7artTM830_n_w_l.jpg" }, { id: "24f2be35-ba6e-4bb7-b60d-47d9c2a5bb7d", price: 35, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/BA/86/CgvUBFdXdlKAJs8WAAhZYEeKhCI758_w_ls.jpg" }, { id: "6e43adf2-18b0-40aa-a95d-84ad3cf352f7", price: 29, pic: "http://pc2.img.ymatou.com/G02/upload/product/original/M07/13/22/CgvUA1eADhCAHWyQAAHAnGAUtm4799_n_w_l.jpg" }, { id: "c082d977-e06f-4f24-bf3e-7768b839170c", price: 758, pic: "http://pc2.img.ymatou.com/G02/shangou/M07/B5/D4/CgvUA1dW4XWALArJAACZadCCJ5Q293_w_ls.jpg" }, { id: "7737d9eb-ae85-4911-8f80-939c4d805b0a", price: 29, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/56/B2/CgvUBFeoq9iAXyveAAPoUP0-kYA656_n_w_l.jpg" }, { id: "bcc4517e-20d5-48da-ae46-708d2e8d03af", price: 288, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/CC/8F/CgvUA1d6N7yASvgPAAMymJaT5yQ96_n_w_l.jpeg" }, { id: "c717e1bd-7a3b-4f92-9317-84b4147ede71", price: 78, pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M07/8B/12/CgvUBFeOSB2AD_7dAAGNl3gl_gU541_n_w_l.jpg" }, { id: "139594cb-833c-4ade-b547-3a9a056b193e", price: 69, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/9D/5D/CgvUA1dWSM6AYn7hAAWcHrWn_90648_w_ls.png" }, { id: "4414e81f-fc3b-427c-b1ee-37b03883e0dc", price: 88, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/02/76/CgvUBFeHQLSALvfLAAHccf91md4006_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1001185, theme: "Tommy Hilfiger男女服饰精选", products: 553, users: 111, href: "", list: [ { id: "bd128bbf-243b-4c2e-a1d4-ea698b06142e", price: 99, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/16/8A/CgvUBFfGh_SADrC8AALybC7Xmv8091_n_w_l.jpg" }, { id: "ea044aaf-32da-4c6e-b867-755fa780036d", price: 229, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/13/4F/CgvUBFfGA0-AFbQsAALknGVeqU8444_n_w_l.jpg" }, { id: "5b5730a9-3343-4ef6-b78b-8b585c0b78f2", price: 168, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/38/1D/CgvUBFekEIOAc8EdAAEHlzPTZWw039_n_w_l.jpg" }, { id: "e956417a-e476-486b-be19-8fd64c6fe551", price: 199, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/D9/DC/CgvUA1d7vRqAGFxnAADXh3zHBn4743_n_w_l.jpg" }, { id: "1d3e6f9b-d5f5-436c-a0d4-2e04a9e08c0d", price: 299, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/D9/C2/CgvUBVe8dPCAMcc8AAJ6-rOnfWA070_n_w_l.jpg" }, { id: "d44ca918-3e73-4b24-a81b-f88813be057e", price: 258, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/C1/EF/CgvUBVe4txiAIkmjAAMYwUZonWk554_n_w_l.jpg" }, { id: "9f9b285a-bd18-409e-a66a-d05c717898d0", price: 179, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/45/84/CgvUBFeIhXGANzZpAADWX4O6_Xc860_n_w_l.jpg" }, { id: "c13e8714-e1a8-48a7-b47b-7c165aa63c34", price: 178, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/9E/4B/CgvUA1ezz_yALQtFAAHeUOJ-DcY945_n_w_l.jpg" }, { id: "29aa1c5a-5f6e-4a80-9305-84e83cf652fc", price: 299, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/EB/44/CgvUBFeZslCADHsjAAPW3Sy2qj8675_n_w_l.jpg" }, { id: "d8120a37-aa93-4e4f-934a-4245c4f42c71", price: 388, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/50/3A/CgvUBVen9AKAOZLHAAFhQsWjV14609_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1002054, theme: "每个都市白领都有一只时尚腕表", products: 310, users: 68, href: "", list: [ { id: "386ebe00-cdd0-4324-92f7-6a25179fe557", price: 1999, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/7E/4D/CgvUBVeNHI6APdp3AAFZgOkl-XU821_n_w_l.jpg" }, { id: "4d93b2e6-7bf6-4878-830f-6ed22c380731", price: 1550, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/6B/D1/CgvUBVer7BSAE7tTAAGD0sdyEp4918_n_w_l.jpg" }, { id: "e6b2eaef-e8ea-4ca1-b9cb-fba630e79572", price: 398, pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M00/EC/53/CgvUBFd-GgWAZ0hWAAHuCzGVzlE002_n_w_l.jpg" }, { id: "0bf2584d-52eb-403e-b668-fc59eddf7b35", price: 899, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/50/9C/CgvUBFeoBtaAVRJaAAPRD_cW1jI986_n_w_l.jpg" }, { id: "756ca0ed-b128-4b72-a308-f5cde1a31fbb", price: 1788, pic: "http://pc2.img.ymatou.com/G02/upload/product/original/M04/13/FE/CgvUBFeAGCiAeyEgAAOoCajEei0337_n_w_l.jpg" }, { id: "c5c95dd3-0585-4ccd-b34b-b2a1b0c98915", price: 1460, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/ED/CF/CgvUA1eZ0Y2AQV2gAAJMchT1mjY462_n_w_l.jpg" }, { id: "c5a664db-aa70-47d1-b0e6-15ad1faafcbe", price: 1299, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/15/40/CgvUA1egLnyAZo-IAAIVAvK1Hxw422_n_w_l.jpg" }, { id: "a3449aef-fdec-4344-9bca-f98b27a8a3de", price: 2380, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/FB/EB/CgvUBVfBjXOAZiOhAAJILon5PNE706_n_w_l.jpg" }, { id: "cb473f7e-3a40-4eb5-8778-043308c80ad4", price: 299, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/99/BF/CgvUBVePNzOAR5inAAFt690zWtA662_n_w_l.jpg" }, { id: "2ad9f10e-ee94-49a7-95e8-b37104b86dc4", price: 699, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/06/F6/CgvUA1eHRaGAL-WUAACUnFlglbU914_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1000691, theme: "工薪族必备 一只FURLA手袋", products: 369, users: 81, href: "", list: [ { id: "326d57e0-e202-45c9-a418-1f7c5c6cee37", price: 1599, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/99/9B/CgvUBFezGJmAf-gQAAH98NQDroc227_n_w_l.jpg" }, { id: "8c0aa3ec-0fba-4ee8-8952-74ebca2dd260", price: 799, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/7C/AD/CgvUBVeM506AGvgHAAEYWxTXLXc839_n_w_l.jpg" }, { id: "3e04f95c-4b0f-4b9f-ae44-0391ab2f1616", price: 1880, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/A5/E7/CgvUA1eQVrKAXqQVAALdAABuInM554_n_w_l.jpg" }, { id: "05059f48-a6bb-48c1-88df-7ecabe65bd4a", price: 799, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/7C/8A/CgvUBVeM5E2ABWGgAAJ_9inEqjQ669_n_w_l.jpg" }, { id: "0962bf25-c417-409d-b39b-daf84c9a4e9d", price: 988, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/C3/0F/CgvUA1e4-vmAZpGRAAH_XdWHcGE171_n_w_l.jpg" }, { id: "5c960ae1-27e3-4c94-8233-7456dc9e82b6", price: 850, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/AF/1A/CgvUA1e1xIGASjQqAAIsrHq1TpY720_n_w_l.jpg" }, { id: "52184a55-e7e5-4e43-9a11-7b9fcc737136", price: 1590, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/79/E6/CgvUBFety5GASYSLAAJeGTYNSgQ032_n_w_l.jpg" }, { id: "f11bbaf9-64eb-44ce-9bd3-07e8c8c6d1b3", price: 2099, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/36/F6/CgvUBVej7UuABhdEAAGb2YixMaY568_n_w_l.jpg" }, { id: "6dbd4793-2b34-43b5-8b81-7432d301bc34", price: 2088, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/6C/81/CgvUA1er7guALEOhAAFI7ymRkME838_n_w_l.jpg" }, { id: "1d6f1747-a292-4821-98a0-becc67381f98", price: 1450, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/0D/1C/CgvUBVfE91SASW_GAAHV3WPdWSU789_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1000335, theme: "你不穿,怎么知道尖头鞋有多美", products: 262, users: 61, href: "", list: [ { id: "5dc85724-e39b-4d29-bb33-bea45910d64e", price: 795, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/0C/2B/CgvUA1fEoT2AX5jGAAOIddgXk2s232_n_w_l.jpg" }, { id: "b47bcbea-e115-41be-94d7-a81d012997d9", price: 699, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/A7/91/CgvUA1dWePGAbtnBAACpSJlaJJI503_w_ls.jpg" }, { id: "1b27c7c2-e996-4039-b403-505425c7c661", price: 799, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/F4/B2/CgvUBVfASQmAfqPkAAJ5Y5NW4DU258_n_w_l.jpg" }, { id: "86c2f638-f8cb-4e41-9165-b186b90de522", price: 799, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/41/2D/CgvUBFeIW0SAGrUQAAdZ8pOEVPU386_n_w_l.JPG" }, { id: "93251a4a-9265-47e8-a108-b790250ca5eb", price: 599, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/4D/53/CgvUBVeGEjSAHP8rAADp5SupP3A653_n_w_l.jpg" }, { id: "522bcfb0-540e-4765-b391-6928e0a63afd", price: 259, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/B9/2B/CgvUBFeS2B-AXOelAAKE2I31Jxk211_n_w_l.jpg" }, { id: "565a3590-f8e2-467a-b5ec-a7e648e3da05", price: 399, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/C9/C9/CgvUBFe6W8eAaV7fAADdh7847PY900_n_w_l.jpg" }, { id: "f0f11042-9d05-4b69-82c2-a8c614025b7c", price: 699, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/CA/32/CgvUBVe6Wi-AFdLaAAIhgT3Z4Zw873_n_w_l.jpg" }, { id: "2099167d-39bf-4949-b5ae-fd156d49a38f", price: 299, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/E5/4F/CgvUBVe-TXmABZ7JAAFIlZ70s98657_n_w_l.jpg" }, { id: "5314a6cc-1ade-4fac-80ba-c32e2d43d839", price: 599, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/F2/D6/CgvUA1eaj5aAH0JHAADbLN5GWzI823_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1000981, theme: "职场男的钱包就应该这么选", products: 708, users: 210, href: "", list: [ { id: "0b5d3386-bb9f-46d3-bd4a-826f926c9073", price: 499, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/0D/00/CgvUA1ee6ZyAPdqtAAKbDUt68dw320_n_w_l.jpg" }, { id: "d558cf02-35a6-45a9-a84d-90930f85b204", price: 480, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/5D/1F/CgvUBFepp3qAEzN8AANrv-wGJEE984_n_w_l.jpg" }, { id: "b9074e54-190e-491d-8e73-21a94884d252", price: 499, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/61/5D/CgvUBVeqe6yASqhuAAP6jd0k0E4643_n_w_l.jpg" }, { id: "96c9711e-5655-4de2-994e-4a6baa61df8b", price: 1380, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/9A/03/CgvUBVezF6CAIHYxAAKT5rHhHSw992_n_w_l.jpg" }, { id: "62de6949-d5e0-4d60-a6f0-34901ba6a7ce", price: 1300, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/6A/90/CgvUBVerwt6AS6jJAAUc50dRQYw030_n_w_l.jpg" }, { id: "1cbc7f2e-af91-4c29-9ba8-5609ce3263a5", price: 189, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/A9/ED/CgvUBVe1WyaARpI7AAIrPYzQMWk137_n_w_l.jpg" }, { id: "b7531635-edd8-4c83-93e6-196e73fcd7b5", price: 299, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/C2/C4/CgvUBVe4_uSAFbPRAALWCg7g2k4590_n_w_l.jpg" }, { id: "731575af-0031-4211-8d3a-75ef19a04d51", price: 800, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B9/F4/CgvUA1e3ZHmAF3_xAAJinKN4FpE421_n_w_l.jpg" }, { id: "506225eb-5135-4a8d-8f9a-dedc4d69af57", price: 488, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/D3/33/CgvUA1eWl-iANn4pAARnRxR7FKE211_n_w_l.jpg" }, { id: "ae673d4e-59c6-4ae3-a7bd-6f4ff7ec0484", price: 399, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/42/4D/CgvUBFeIZ9aAcfTXAASRR__3Ns4881_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1001855, theme: "少女派最该入手的唇膏盘点", products: 221, users: 121, href: "", list: [ { id: "dd59aefa-0619-40a9-8f44-33b7b980e7e7", price: 36, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/44/92/CgvUBVelr-mARWRMAAL0-pzS8GQ614_n_w_l.jpg" }, { id: "85b8ce98-b7e6-4323-83b7-ba891f0a0da3", price: 249, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/F6/9E/CgvUBVfAv0CAYFwEAAHpgOwVRgw908_n_w_l.jpg" }, { id: "9dfe69a1-fc6d-4652-941b-3e1140ef50ec", price: 199, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/98/FC/CgvUBVePKD2AXj_uAAGhr-ddlCs021_n_w_l.jpg" }, { id: "db7ea83c-90a2-4569-a063-2580e4bbe586", price: 149, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/08/4B/CgvUBFeeBECASewiAAFv5dozLqQ743_n_w_l.jpg" }, { id: "7e702512-bc7c-49a7-894c-7f79e08635b6", price: 209, pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M0A/22/F6/CgvUBFeAcu-ADZbNAAbBZzsCMZo894_n_w_l.jpg" }, { id: "8aa440ee-b99c-4047-ad6b-669b0c864266", price: 85, pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M0B/8E/DC/CgvUA1eOS5KABSC4AAE47YcX0yo815_n_w_l.jpg" }, { id: "4b845bc6-dde2-4d83-b3cb-5c2aba1629ee", price: 68, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/72/E9/CgvUBFeMM6qABb7rAAe2r7x1tQQ859_n_w_l.jpg" }, { id: "43c635e7-01e8-4dfc-be38-5d11d9bd67bd", price: 195, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/9D/DE/CgvUA1ePZEOAQ1kZAAY-lRjPbzQ155_n_w_l.JPG" }, { id: "3689fe6f-fc0d-4a4a-a5b1-0553038e154f", price: 218, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/50/76/CgvUBVeI4T-AOjh-AALGBDOtN9w821_n_w_l.jpg" }, { id: "9a1aa6ec-fcab-4206-bce3-75b0eed4a331", price: 199, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/DC/0C/CgvUBFe9ExSAAxj-AALHgxQqlcY432_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1002012, theme: "Kate spade的甜心少女风", products: 1125, users: 157, href: "", list: [ { id: "a92b1158-d8cc-4bfc-bba1-8e269a597fc2", price: 1380, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/5F/46/CgvUBVep3VWAeqi5AAIJ0LKNigk289_n_w_l.jpg" }, { id: "5a388eb3-e696-4c78-9b5a-4a6cefb54e2f", price: 1088, pic: "http://pc1.img.ymatou.com/G02/shangou/M07/4F/4A/CgvUBFen5TSAPn2PAAI_RpcB9qM096_n_w_l.jpg" }, { id: "c788ead9-44b1-47da-86db-f520e871a959", price: 875, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/B9/A7/CgvUA1eSypCAHLxPAALzOv-BEHo743_n_w_l.jpg" }, { id: "2a8d3aac-0991-41db-bfcc-c89026f92756", price: 760, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/9B/E3/CgvUBFezohaAJuKgAAOQlbLJBiU608_n_w_l.jpg" }, { id: "f13dd52f-b3ae-46cb-b4fc-c3eaeaac6a7e", price: 498, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/CF/DF/CgvUBVd6qWiAJg6HAADCi9bKFak394_n_w_l.jpg" }, { id: "bfa91c51-57a2-46c4-a6de-a420852be9ca", price: 429, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/8E/3A/CgvUA1dyasWAT8sCAADksewcyQ0275_n_w_l.jpg" }, { id: "16462c30-454d-4566-a40c-1c9af6d066eb", price: 560, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/F1/CF/CgvUBVe__PSARr-9AANZ07utoWA217_n_w_l.JPG" }, { id: "6a9d0e09-6d7f-42c1-bfd7-50adb12473a2", price: 1249, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/97/B9/CgvUBVePEcaADHj-AAHcUtVj1OA401_n_w_l.jpg" }, { id: "484a8967-c843-4d34-8876-4afca275cd58", price: 1250, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B3/0B/CgvUBVe2lp2AVGDtAAGFyOb9OhI144_n_w_l.jpg" }, { id: "5e32fbce-be90-4c55-b3ba-2bd05de10f3a", price: 998, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/C3/0F/CgvUBVe5CL6ABP0CAAGc6XBDq5c140_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1000657, theme: "施华洛世奇 奢华之最", products: 1284, users: 147, href: "", list: [ { id: "68775149-2996-40d3-8164-fe51ebaeb247", price: 390, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B5/40/CgvUA1e2usGAGMiOAAIeoEq4_8k942_n_w_l.jpg" }, { id: "f4ea3d67-957b-44b1-824a-aca71b191975", price: 290, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/48/C1/CgvUBFemkpKAQimhAAIVTLA1TnM821_n_w_l.jpg" }, { id: "608f9cea-865a-403f-a064-b7020d8b9151", price: 500, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/C1/9B/CgvUBFe407aAVwHsAAEVmeaH0Wo087_n_w_l.jpg" }, { id: "5f74f137-6b06-412f-92b0-6ccfabc5e4ff", price: 990, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/05/31/CgvUBFedjnOAeJW5AALIA4EvnDY776_n_w_l.jpg" }, { id: "207db2b4-d7b7-40af-b769-a51384030781", price: 358, pic: "http://pc3.img.ymatou.com/G02/shangou/M08/9B/A9/CgvUA1dWP5KAKz_nAASY1zfAp2Q998_w_ls.jpg" }, { id: "61e75f97-934f-480a-a253-c4401a692c2f", price: 799, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/61/16/CgvUA1eJ5eSAeljEAAMXM9aiJWo944_n_w_l.jpg" }, { id: "f60f6587-e557-4261-b58f-31f5719df5ba", price: 580, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/50/97/CgvUBFeI4xKAQHy7AAEVKIt--A0224_n_w_l.jpg" }, { id: "630d7893-6a9e-4fc8-8a93-098fce056920", price: 659, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/A3/34/CgvUBVeQI_CAZkjQAAEm1d4A2xE253_n_w_l.jpg" }, { id: "1e52e01f-335e-440b-99d6-7cd79ba6d1ae", price: 959, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/B4/CC/CgvUBFd3Ik2AazqrAACZbtZm554683_n_w_l.jpg" }, { id: "3b5663c3-c694-4a68-a02f-c6bda164427a", price: 515, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/A1/42/CgvUBVe0J1KAczpWAAG7JrvcS2w388_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1002418, theme: "爆款再见,饰品我只要独一无二", products: 113, users: 33, href: "", list: [ { id: "dfff8751-775c-437f-8fa7-5aec934a5ef0", price: 89, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/49/84/CgvUA1emjwCAYqSnAAGVFiRPoW4269_n_w_l.jpg" }, { id: "ad098f8a-5fcd-42ab-afdd-3ff580a1ac0b", price: 350, pic: "http://pc1.img.ymatou.com/G02/shangou/M03/41/AB/CgvUBFelUceAJv-yAAFqX0aWyWE901_n_w_l.jpg" }, { id: "bda09ca7-56cb-4458-b6d1-9f988c9f326d", price: 450, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/98/7F/CgvUA1ey5bOAYkHaAAJFbg6Ji3M944_n_w_l.jpg" }, { id: "23fc3728-a706-42ce-9e5f-7ce742474a73", price: 680, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/07/03/CgvUA1edweiAfoO3AAFmKdmzk3c556_n_w_l.jpg" }, { id: "f8ea5393-7972-40b0-90b2-32b22378cb35", price: 290, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/BE/92/CgvUA1e4G0uAEDW7AAIHW5H3aC8568_n_w_l.jpg" }, { id: "f249ae53-750e-4237-a53d-7deb1c5102e5", price: 468, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/C3/9F/CgvUBFeUZn6ATpvdAAWmCLN-aEk844_n_w_l.jpg" }, { id: "460b5d5c-6b6e-4c03-aefa-a56c7a2df8d4", price: 3100, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/CF/AC/CgvUBVe6-jOAZ7w4AALCedzhGMQ665_n_w_l.jpg" }, { id: "60040ecd-23f4-44e7-a3e9-81e36327a2ca", price: 129, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/42/37/CgvUBVelXh2AHgrnAAHXOIwMgKw041_n_w_l.jpg" }, { id: "83f60817-e22c-42e9-94cf-331e8ffc1ce3", price: 3350, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/60/38/CgvUBFeJ5Q6AD0MwAAKY-Ou9erk199_n_w_l.jpg" }, { id: "0e816cf1-4c0d-4ced-a356-45620fbda1b8", price: 199, pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M07/FC/C3/CgvUBVd_rEqAHMPBAAOCO_DMoCM554_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1003396, theme: "清新淑女的露肩裙美到没朋友", products: 50, users: 34, href: "", list: [ { id: "548c381a-2be7-4a6c-9344-b898f18e331e", price: 650, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/56/70/CgvUBVeomK2AOJWXAAKfQ3-H1DQ245_n_w_l.jpg" }, { id: "8ca2ca1a-3f7b-4826-9b17-a339f4c4cbf3", price: 560, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/AE/6B/CgvUBVe1v6uAOOlwAAIW5S9SjFo614_n_w_l.jpg" }, { id: "aed17646-dfe8-4969-bbd4-cfaab80000db", price: 1899, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/DF/4F/CgvUBFe9ZWWAGrIwAAIQZS0wRbY838_n_w_l.jpg" }, { id: "d77c9628-84aa-4e51-861f-f3674d195bd3", price: 200, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/3A/DA/CgvUBFeIBgyAJubQAASBrt5UyVc044_n_w_l.jpg" }, { id: "dee59eeb-d82c-4ff4-838c-c492b3d001ab", price: 218, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/F1/F7/CgvUA1eaQR6AEQ61AAIW-fqc7Vo838_n_w_l.jpg" }, { id: "994f9376-8e3b-4e27-b393-d4ca05fa046a", price: 229, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/73/6A/CgvUBFes-HSANU0pAAPrzMLamgQ538_n_w_l.jpg" }, { id: "af6efa07-6853-4d6c-acfc-a3043eb24988", price: 399, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/58/0D/CgvUBFepI7-AGrqWAAG-mCgD8Nc129_n_w_l.jpg" }, { id: "5a721e93-2ea9-4155-8678-f5c09e518514", price: 369, pic: "http://pc1.img.ymatou.com/G02/shangou/M08/B2/43/CgvUBVe2fWSAOSUaAADtD35Mn34794_n_w_l.jpg" }, { id: "a878b978-31c0-4284-a6de-f63aafd61312", price: 1999, pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/D6/AF/CgvUBFe8L7SAMnTMAAG-UvVKf8U384_n_w_l.jpg" }, { id: "2215cbde-97a6-46d5-aea2-9440e115f251", price: 468, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/2F/6C/CgvUA1eiylCAfjIDAAGBiNPRRUM031_n_w_l.jpg" } ], follow: false, topictype: 106 }, { id: 1000302, theme: "Tod's:无法抗拒的经典舒适", products: 179, users: 30, href: "", list: [ { id: "f6c50028-9211-4080-ae58-3beed3728e50", price: 1850, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/94/32/CgvUBVeygneAchtNAAEXO9Cv9Ro827_n_w_l.jpg" }, { id: "49c37f83-2bdd-473c-b712-610fa642f849", price: 1800, pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B8/15/CgvUBVe3FXeAd5MoAAGsnxuqdHA352_n_w_l.jpg" }, { id: "a92f93d6-2ce6-40b2-87cf-19d34cbb03d0", price: 1250, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/09/68/CgvUBVfEHHOAB1h_AAIwSBEZVVg530_n_w_l.jpg" }, { id: "908cc4d0-1e9a-475b-92a5-2da58a184a52", price: 1980, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/D4/EC/CgvUA1e75-GAVy0TAAa5CXGm6mo536_n_w_l.JPG" }, { id: "cd3accbc-9c8e-44e8-bee2-0fd2062e54a2", price: 2580, pic: "http://pc1.img.ymatou.com/G02/shangou/M04/4B/61/CgvUBVem80yAFLBhAAEUV4Hs7vs476_n_w_l.jpg" }, { id: "7ace0a0f-2725-4a46-af60-036cb5ccbe83", price: 1640, pic: "http://pc1.img.ymatou.com/G02/shangou/M09/0E/3C/CgvUBFfFK_aALbCvAAD4yZZoPCM584_n_w_l.jpg" }, { id: "d8c8fae1-a169-4530-864c-6ba28222d3e7", price: 1880, pic: "http://pc1.img.ymatou.com/G02/shangou/M05/93/F0/CgvUBVeye--AdCSgAAIxaPtS2GM400_n_w_l.jpg" }, { id: "c475412f-ae29-4690-b46b-c4407db8916b", price: 1700, pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/F4/E4/CgvUBFfAWu-AZgWZAAHlwvXa_Y0542_n_w_l.jpg" }, { id: "f5d34f68-d566-4cf2-aa8e-142ef058fd71", price: 1499, pic: "http://pc1.img.ymatou.com/G02/shangou/M06/BB/29/CgvUBFe3zPqAANCxAAHr5HcZC4E398_n_w_l.jpg" }, { id: "cf1a8142-91f2-4b2c-bb86-61ae0ede2b73", price: 3200, pic: "http://pc1.img.ymatou.com/G02/shangou/M02/85/8B/CgvUBVev8Y6ACkDoAAKBE5K1Wjg827_n_w_l.jpg" } ], follow: false, topictype: 106 } ] } }
RecyclerView 实现横向滚动效果的更多相关文章
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- js 实现图片无限横向滚动效果
门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- Android RecyclerView实现横向滚动
我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件Recycler ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- Android TextView 横向滚动(跑马灯效果)
Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...
- jQuery实现滚动效果详解1
声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
随机推荐
- javaweb面试题
1.Tomcat的优化经验 答:去掉对web.xml的监视,把JSP提前编辑成Servlet:有富余物理内存的情况下,加大Tomcat使用的JVM内存. 2.什么是Servlet? 答:可以从两个方面 ...
- dict的操作和三级菜单
dict的基本操作 # Author:nadech info = { "stu001":"sjp", "stu002":"cxx& ...
- if-case-循环语句
IF语句 drop procedure if exists p_hello_world; create procedure p_hello_world(in v_id int) begin ) the ...
- Go 错误处理
Go 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } 我们可以在编码 ...
- MySQL LIKE 子句
MySQL LIKE 子句 我们知道在MySQL中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录. WHERE 子句中可以使用 ...
- 《读书报告 -- Elasticsearch入门 》-- 安装以及简单使用(1)
<读书报告 – Elasticsearch入门 > 第一章 Elasticsearch入门 Elasticsearch是一个实时的分布式搜索和分析引擎,使得人们可以在一定规模上和一定速度上 ...
- 让你的代码量减少3倍!使用kotlin开发Android(三) 缩短五倍的Java Bean
回顾一下 哈,没想到你已经坚持不懈看到第三篇了,不错哈~坚持就是胜利. 本文同步自博主的私人博客wing的地方酒馆 在上一篇文章中,我们介绍了扩展函数,这里对上一篇进行一点小小的补充. 还记得text ...
- [BBS]搭建开源论坛之JForum富文本编辑器更换
本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47866905 上一节我们将开发环境搭建完成,我们 ...
- Device Mapper 代码分析
Device Mapper(DM)是Linux 2.6全面引入的块设备新构架,通过DM可以灵活地管理系统中所有的真实或虚拟的块设备. DM以块设备的形式注册到Linux内核中,凡是挂载(或者说&quo ...
- Dynamics CRM 导出系统中实体的属性字段到EXCEL
我们在CRM中看元数据信息,可以通过SDK中的metadata browser的解决方案包,但该解决方案包只是在可视化上方便了,但如果我们需要在excel中整理系统的数据字典时这个解决方案包就派不上用 ...