精华内容
下载资源
问答
  • 多于5个的显示“展开更多” 点击“展开更多”,展开该级所有子级菜单,同时显示“收起更多” 【代码】: @Bind(R.id.exp_listview)ExpandableListView expListview; adapter = new MyAdapter1(dataBeans...

    【需求】:

    如上面图示

    当点开某个一级菜单的时候,其他菜单收起;

    子级菜单默认最多5个;

    多于5个的显示“展开更多”

    点击“展开更多”,展开该级所有子级菜单,同时显示“收起更多”

    【代码】:

    @Bind(R.id.exp_listview)
    ExpandableListView expListview;
    adapter = new MyAdapter1(dataBeans);
    expListview.setDividerHeight(0);
    expListview.setChildDivider(null);
    expListview.setGroupIndicator(null);//去掉ExpandableListView 默认的箭头
    expListview.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
    @Override
    public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long
    id) {
    return false;//默认为false,设为true时,点击事件不会展开Group
    }
    });
    expListview.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
    @Override
    public void onGroupExpand(int groupPosition) {
    adapter.setMaxIs5(true);
    for (int i = 0; i < expListview.getCount(); i++) {
    //expListview.expandGroup(i);
    if (i != groupPosition) {
    expListview.collapseGroup(i);//折叠其他
    }
    }
    adapter.notifyDataSetChanged();
    }
    });
    expListview.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
    @Override
    public void onGroupCollapse(int groupPosition) {
    adapter.setMaxIs5(true);
    }
    });
    expListview.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
    @Override
    public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int
    childPosition, long id) {
    return false;
    }
    });
    expListview.setAdapter(adapter);

    class MyAdapter1 extends BaseExpandableListAdapter {

    private List<Category.DataBean> dataBeans;
    private boolean maxIs5=true;//子View最多5个
    private View expand_more_view;//展开更多
    private View collapse_more_view;//收起更多
    // private View listviewItem;//
    private boolean isExpandMore=false;
    private boolean isCollapseMore=false;

    public void setMaxIs5(boolean maxIs5) {
    this.maxIs5 = maxIs5;
    }

    public MyAdapter1(List<Category.DataBean> dataBeans1) {
    this.dataBeans = dataBeans1;
    expand_more_view=UIUtils.getXmlView(R.layout.category_expand_more);
    collapse_more_view=UIUtils.getXmlView(R.layout.category_collapse_more);
    // listviewItem=UIUtils.getXmlView(R.layout.item_category_listview_item);
    }

    @Override
    public int getGroupCount() {
    return dataBeans == null ? 0 : dataBeans.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
    int size = dataBeans.get(groupPosition).getSubs().size();
    int size1=Math.min(size,5);
    int size2=Math.max(size,size1);
    if(maxIs5){
    System.out.println("【getChildrenCount】:"+groupPosition+":"+size1);
    return size1;
    }else{
    System.out.println("【getChildrenCount】:"+groupPosition+":"+size2);
    return size2;
    }
    }

    @Override
    public Object getGroup(int groupPosition) {
    return dataBeans.get(groupPosition);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
    System.out.println("【getChild】:groupPosition="+groupPosition+",childPosition="+childPosition);
    return dataBeans.get(groupPosition).getSubs().get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
    System.out.println("【getGroupId】:"+groupPosition);
    return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
    System.out.println("【getChildId】:groupPosition="+groupPosition+",childPosition="+childPosition);
    return childPosition;
    }

    @Override
    public boolean hasStableIds() {
    //组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。
    return true;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
    ViewGroup parent) {
    if (convertView == null) {
    convertView = UIUtils.getXmlView(R.layout.expand_header);
    }
    ImageView iv_category_item = (ImageView) convertView.findViewById(R.id
    .iv_category_item);
    x.image().bind(iv_category_item, dataBeans.get(groupPosition).getImg());
    return convertView;
    }
    @Override
    public View getChildView(int groupPosition, final int childPosition, boolean isLastChild, View
    convertView, ViewGroup parent) {
    System.out.println("【getChildView】:"+childPosition);
    // if (convertView == null) {
    // convertView = UIUtils.getXmlView(R.layout.expand_content);
    // }
    // ListView lv_category_item = (ListView) convertView.findViewById(R.id.lv_category_item);
    // MyAdapter2 adapter = new MyAdapter2(dataBeans.get(groupPosition).getSubs());
    // lv_category_item.setAdapter(adapter);
    // if (convertView == null) {
    // convertView = listviewItem;
    convertView = UIUtils.getXmlView(R.layout.item_category_listview_item);
    // convertView= LayoutInflater.from(getActivity()).inflate(R.layout.item_category_listview_item,parent,false);
    // }
    TextView tv_catename = (TextView) convertView.findViewById(R.id.tv_catename);
    RelativeLayout rl_category= (RelativeLayout) convertView.findViewById(R.id.rl_category);
    List<Category.DataBean.SubsBean> list=dataBeans.get(groupPosition).getSubs();
    final Category.DataBean.SubsBean subsBean =list.get(childPosition);
    tv_catename.setText(subsBean.getCate_name());
    rl_category.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    UIUtils.toast("跳转到类别:" + subsBean.getCate_name() + ",【图片url】:" + subsBean
    .getImg(), false);
    // if (childPosition == 4) {
    // maxIs5 = false;
    // YouFanApplication.mHandler.post(new Runnable() {
    // @Override
    // public void run() {
    // notifyDataSetChanged();
    // }
    // });
    // }
    }
    });
    //处理“展开更多”和“收起更多”
    if(list.size()>5 && isLastChild){
    final LinearLayout convertView1= (LinearLayout) convertView;
    if(maxIs5){//添加展开更多布局
    if(isExpandMore){
    //convertView1.removeView(expand_more_view);
    }
    ViewGroup parent1 = (ViewGroup) expand_more_view.getParent();
    if(parent1!=null){
    parent1.removeAllViews();
    }
    convertView1.addView(expand_more_view);
    //The specified child already has a parent. You must call removeView() on the child's parent first.
    isExpandMore=true;
    }else{//添加收起更多布局
    if(isCollapseMore){
    //convertView1.removeView(collapse_more_view);
    }
    ViewGroup parent2= (ViewGroup) collapse_more_view.getParent();
    if(parent2!=null){
    parent2.removeAllViews();
    }
    convertView1.addView(collapse_more_view);
    isCollapseMore=true;
    }

    /*-------------------------------------------------------------*/
    expand_more_view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    convertView1.removeView(v);
    //isCollapseMore=true;
    //isExpandMore=false;
    maxIs5 = false;
    YouFanApplication.mHandler.post(new Runnable() {
    @Override
    public void run() {
    notifyDataSetChanged();
    }
    });
    }
    });
    /*-------------------------------------------------------------*/
    collapse_more_view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    convertView1.removeView(v);
    //isExpandMore=true;
    maxIs5 = true;
    YouFanApplication.mHandler.post(new Runnable() {
    @Override
    public void run() {
    notifyDataSetChanged();
    }
    });
    }
    });
    /*-------------------------------------------------------------*/
    return convertView1;
    }

    return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
    //是否选中指定位置上的子元素
    return true;
    }
    }

    转载于:https://www.cnblogs.com/libuyi/p/6031702.html

    展开全文
  • vue 判断导航长度点击展开更多 html代码 <div v-for="(item,index) in showList" v-show="index<num" :id="index" :key="index" @click="singleItemList(item.id),changSemester(index)"> <img :src=...

    vue 判断导航长度点击展开更多

    html代码

    <div v-for="(item,index) in showList" v-show="index<num" :id="index" :key="index"  @click="singleItemList(item.id),changSemester(index)">
                <img :src="item.logo" alt="" style="width:22px;height:22px;float:left">
                <p style="float:left;margin-top:4px;margin-left:10px;">{{ item.name }}</p>
              </div>
              <span style="position: relative;top: 4px;cursor:pointer;" @click="showMore">{{ txt }}</span>
    

    在data里面定义一个 num的长度,和定义一下 txt的初始化

    data() {
        return {
          showList:[],
          isShow: true,
          num: 7,
          txt:‘更多’
          }
          }
    

    在methods调用click方法

    showMore() {
          this.isShow = !this.isShow
          this.num = this.isShow ? 7 : this.showList.length
          this.txt = this.isShow ? '更多' : '收起'
        },```
    
    
    展开全文
  • 业务开发中会有一些场景,超出一行显示 … 与展开更多按钮,展开更多按钮可以切换显示一行还是全部内容,少于一行正常显示; 解决方案 分析下问题: 一般这种需求不好实现的原因是,在移动端,每行显示的字数的有...

    微信小程序设置超出行显示 ... 与展开更多按钮

    问题描述

    业务开发中会有一些场景,超出一行显示 … 与展开更多按钮,展开更多按钮可以切换显示一行还是全部内容,少于一行正常显示;

    解决方案

    分析下问题: 一般这种需求不好实现的原因是,在移动端,每行显示的字数的有可能在不同机型会有差异,所以就使开发者无法知道这些内容是否超过一行,是否该显示展开更多按钮。

    绕开上述原因,曲线救国,我们在每次页面渲染完成之后再去获取承载内容的元素宽度,和承载内容的元素的外层父级盒子的宽度相对比,如果宽度之差小于半个字体的大小(是为了防止一点误差),则显示 … 的样式,显示展开更多按钮,相反,则隐藏更多按钮。

    最终效果如下:

    image

    主要代码如下

    <view class="coupon-remark-wrapper">
        <!--id = toggle-warpper 为包裹内容的父级元素-->
        <view class="coupon-remark-content" id="toggle-wrapper">
            <!--id = toggle-content 为内容的容器,控制显示全部内容还是显示超出一行... -->
            <view id="toggle-content" class="{{toggleParams.toggleFlag === 1?'ellipsis':''}}" hidden="{{toggleParams.toggleFlag === 0}}">
                {{couponData.limitRemark}}
            </view>
            <!--class = toggle-icon 为展开更多按钮-->
            <image class="toggle-icon {{toggleParams.toggleFlag === 1?'hide':'show'}}" wx:if="{{toggleParams.toggleShow}}" bindtap="toggleHandler" src="https://img.dmallcdn.com//dshop/201904/b1c5af14-f29a-494c-9e3b-899f1a2cf218"></image>
        </view>
    </view>
    
    .coupon-remark-wrapper {
      padding: 20rpx;
      padding-top: 33rpx;
      padding-right: 60rpx;
      margin-top: -20rpx;
      line-height: 1;
      box-sizing: border-box;
      color: #666666;
      background-color: #fff;
      position: relative;
      z-index: 1;
    }
    .coupon-remark-content {
      width: 100%;
      view {
        font-size: 22rpx;
        line-height: 1.5;
        word-break: break-all;
        display: inline-block;
        max-width: 100%;
      }
      .ellipsis{
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .toggle-icon {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 20rpx;
        top: 35rpx;
        transition: all 0.2s linear;
        &.show {
          transform: rotate(180deg);
        }
      }
    }
    
    const couponItemBehavior = Behavior({
    	data: {
    		// 控制说明文案收起/展开
    		toggleParams: {
    			toggleFlag: 1, //0收起1展开
    			toggleShow: false, //默认不显示toggleIcon
    		},
    	},
    	ready() {
    		this._checkRemarkToggle();
    	},
    	methods: {
    		// 获取指定元素实际宽度
    		_getElementWidth(id = "") {
    			let _query = this.createSelectorQuery();
    			return new Promise(resolve => {
    				_query.select(id).fields({
    					size: true,
    				}, (res) => {
    					resolve(res.width)
    					_query = null;
    				}).exec();
    			});
    		},
    
    		// 说明文字收起/隐藏事件
    		toggleHandler() {
    			const {toggleFlag} = this.data.toggleParams;
    
    			this.setData({
    				toggleParams: {
    					toggleFlag: toggleFlag === 0 ? 1 : 0,
    					toggleShow: true
    				}
    			})
    		},
    		/*
    		* 检测说明文字是否需要隐藏/收起操作
    		* 对比文字外层固定宽度容器元素宽度wrapperWidth与当前文字元素宽度contentWidth
    		* 若相差小于10则说明超出一行
    		* */
    		_checkRemarkToggle() {
    			Promise.all([
    				this._getElementWidth('#toggle-wrapper'),
    				this._getElementWidth('#toggle-content')]
    			).then(res => {
    				const wrapperWidth = res[0];
    				const contentWidth = res[1];
    
    				const {limitRemark, startDate, endDate, statusCode} = this.properties.couponData;
    
    				if (wrapperWidth - contentWidth < 10) {
    					this.setData({
    						toggleParams: {
    							toggleFlag: 1,
    							toggleShow: true
    						},
    						timeArea: `${startDate}-${endDate}`,
    						unableImageSrc: UNABLE_IMAGE[statusCode]
    					})
    				}
    			})
    		}
    	}
    });
    

    总结:
    在这里只是个抛砖引玉提供一个思路,小程序中可以这样实现,在 H5 中也可以这样实现,如果有更好的方案,欢迎讨论提供!

    展开全文
  • 最近在微信小程序界面开发中,经常遇到文字描述太多,UI设计师要求将文字收起,只留两行文字,后面以省略号显示,点击“查看全部”可以展开更多,效果如下图: 先贴上wxml中的代码: &lt;view class="...

    最近在微信小程序界面开发中,经常遇到文字描述太多,UI设计师要求将文字收起,只留两行文字,后面以省略号显示,点击“查看全部”可以展开更多,效果如下图:

    先贴上wxml中的代码:

    <view class="cmty-desc {{fold ? 'fold' : 'unfold'}}">
        星河时代所处区域为大运新城与龙岗中心城交汇之处。政府对大运新城的定位为集体育运动、居住、商业文化、旅游休闲为一体的城市复合功能区,其高端的规划起点,巨大的政府投入,便捷的交通条件,完善的区域配套,将使片区的城市发展提前十年。星河时代所处区域生态资源丰富,除却龙城公园、龙潭公园、原生态自然公园——马峦山郊野公园、清林径森林公园、龙岗植物园外,正在建设的大运自然公园也围绕于项目区域附近,生态区域优越。
      </view>
      <view class='view-all-layout'>
        <text class='view-all' bindtap='unfold'>{{foldText}}</text>
      </view>

    关键的代码在css中:

    .cmty-desc {
      margin: 20rpx 20rpx 0rpx 30rpx;
      font-size: 28rpx;
      color: #888;
      //关键属性
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;//结尾以省略号显示
      overflow: hidden;
    }
    
    .fold {
      -webkit-line-clamp: 2;//设置折叠之后显示的行数
    }
    
    .unfold {
      -webkit-line-clamp: 0;
    }
    
    .view-all-layout {
      width: 100%;
      position: relative;
    }
    
    .view-all {
      position: absolute;
      right: 30rpx;
      font-size: 26rpx;
      color: #3e79c1;
      padding: 5rpx;
    }

    最后是js文件添加事件点击的代码:

    Page({
      data: {
        fold: true,
        foldText: '查看全部',
      },
    
      unfold: function (e) {
        var page = this;
        let value = !this.data.fold;
        var text = '';
        if (value) {
          text = '查看全部';
        } else {
          text = '收起全部';
        }
        this.setData({
          fold: value,
          foldText: text
        })
      }
    
    })

     

     

     

     

     

     

     

     

    展开全文
  • MGSwipeTableCell是一个UITableViewCell的子类, 它实现了左,右滑动展开更多按钮用来实现一些相关操作就和QQ好友列表滑动展开的按钮一样,封装的很好,动画效果也处理很到位,废话不多说,我们来看下它的简单集成 1...
  • 直播视频网站源码,列表的展开更多和点击收起功能的相关代码 1:布局文件使用recyclerview显示四列并加入阴影及点击按钮控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=...
  • 仿微信小程序和QQ头部下拉展开更多布局项目,主要参考来源于Github项目PullLoadXiaochengxu, 本项目改造主要是优化中间内容布局是ListView、RecyclerView或ScrollView等可滚动view时与头部或底部滑动存在的滑动冲突...
  • js展开更多

    2014-11-03 10:39:00
    '">展开更多</span>' );   } else {   parent.removeClass(classname);   }     $( "#mores" +unms).click( function (){     if ($( this ).hasClass( 'moress' )){     $( this )....
  • ``` (ite, index) in thistype" :key="index" class="refine2"> <h4>{{thistype[index].name}} (item, num) in ite.lists" :key="num"> (item)"> ... <label v-if="index < ab" :for="item.name"> ...
  • vue 点击展开更多+收起

    千次阅读 2019-09-24 18:49:21
    '查看更多':'收起'}}</span>  2、data数据 data() { return { showMore: true, list:[...] } }  3、计算属性(set方法里的val值就是get方法返回的值) computed: { showList: { get: ...
  • ExpandLayout是支持在TextView行末添加点击展开更多或收缩文本的布局,支持点击查看全部和收起功能,同时提供了大量自定义属性以支持更多的个性化属性配置,效果展示GIF如下,由于录制工具的问题,视频转换为GIF结束...
  • H5+css实现展开更多内容

    千次阅读 2020-04-24 16:57:38
    <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />...
  • win10浏览器不能展开全部界面 1、按下“Win+R”组合键,在框中输入“inetcpl.cpl”,点击确定打开“internet 选项”; 2、点击“高级”选卡,点击底部的“重置”按钮; 3、在“重置 Internet Explorer 设置”...
  • 提供oc版和swift版,实现思路完全一致
  • vue点击展开更多,点击收起

    千次阅读 2019-01-31 19:26:20
    '收起':'查看更多优惠'}} < span class = " iconfont { ' show ' ?icon-xiajiantou:icon-up} " > span > div > div > < div class = " choiceness_item " > < div class = " main " > < div ...
  • 项目需求:页面标题Title,一行文字,宽度固定,当文字过多时候就显示省略号,省略号右侧有下拉箭头图标,点击可以展开显示所有标题内容;当标题内容不超过固定宽度时候没有省略号,不可点击显示过标题弹窗。 ...
  • 1:布局文件使用recyclerview显示四列并加入阴影及点击按钮控件 <?xml version="1.0" encoding="utf-8"?> ...-- //展开更多,点击收起--> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,057
精华内容 2,022
关键字:

展开更多