【声明】关于六久阁私自出售我公司dedecms小程序插件声明
发布时间:2021-04-06 08:39:51查看:0dedecms小程序列表/内容页如何根据不同栏目显示不同界面 
平时我们在搞小程序难免会出现不同的界面,但是我的demo只默认了list和show界面,没有给出其他显示页面的方法,这种情况一般我们有三种办法

第一种:直接复制一份list或者show改个名字(我们以list2和show2为例)
复制一份list改成list2,复制一份show改成show2,并在app.json添加对应的路径
首页链接到列表页的链接我们可以直接写成:
  1. <navigator url='/pages/list2/lis2t?typeid=11&listtype=3'
  2.             <image src='../../images/s01.png' mode='widthFix'></image> 
  3.             <view class='service_li_text'>腾石建站</view> 
  4.         </navigator> 
同理内容页跳转是
  1. <navigator url='/pages/show2/show2t?id={{item.id}}'</navigator> 

另外还有重要的一点:common.js中的get_menu()方法,如果你这个栏目对应的url不是默认的/pages/list/list/,你就需要特殊判断一下,
新版本demo修改方式:
  1. var diylist = [ 
  2.         {'typeid':6,'url':'/pages/page/page','listtype':'3','ispart':'1'},//单页面 
  3.         {'typeid':10,'url':'/pages/list2/list2','listtype':'3','ispart':'0'},//列表 
  4.         {'typeid':18,'url':'/pages/list2/list2','listtype':'4','ispart':'0'
  5.     ]; 
旧版本demo修改:
  1. if(menulist[i].id == 29 || menulist[i].reid == 29 || menulist[i].topid == 29){ 
  2.                 ispart = 1; 
  3.                 url = '/pages/list2/list2'
  4.             } 
大家也看出了了,这种虽然设计界面方便了,但是修改的比较多,改动比较复杂


第二种:直接通过栏目typeid判断
这种是把所有的div写到同一个页面里边,通过判断不同的typeid显示不同的div
  1. <block s-if="{{curtypeid == 18}}"
  2.     <view>您的div</view> 
  3. </block> 
  4. <block s-else
  5.     <view>默认的div</view> 
  6. </block> 
这种修改方式无论内容页还是列表页 都适用,简单粗暴,建议使用这种方式

第三种办法:通过template模板法
这种方法和第二种方法用法一样,不同的是我们不用吧view写到这里边 可以
  1. <block s-if="{{curtypeid == 18}}"
  2.     <template is="products_template" data="{{ {list:list,tengcee} }}" /> 
  3. </block> 
  4. <block s-elif="{{curtypeid == 20}}"
  5.     <template is="case_template" data="{{ {list:list,shitou} }}" /> 
  6. </block> 
  7. <block s-else
  8.     <view>默认的div</view> 
  9. </block> 

然后我们可以在template下的list.swan里边创建一个名字为products_template和case_template的模板,在这个模板里边写你的全部div
  1. <template name="list_1"
  2.     <view>写你的div</view> 
  3. </template> 
这种方法好处就是列表页或者内容页代码简单,并且template的模板可以复用。

综上所述,建议以第二种方法为主,简单粗暴不易出错,想代码优美就用第三种,如果有小程序基础,可以试用第一种办法

禁止六久阁无耻抄袭


版权声明:本文为原创文章,未经允许不得转载。https://doc.tengcee.com/question/171.html

服务热线

15137100750

我知道你不会打


但是我还是要写


你懂得!

微信二维码

QQ群二维码